Angular 11 encapsulation system

bs-row.ts

import {
  Component,
  ComponentFactoryResolver,
  ComponentRef,
  Directive, ElementRef,
  Input, OnInit, Renderer2,
  TemplateRef,
  ViewContainerRef
} from "@angular/core";

@Component({
  selector: 'bs-row-container',
  template: `<ng-container *ngTemplateOutlet="tpl"></ng-container>`
})
export class BsRowComponent implements  OnInit{
  @Input() tpl: TemplateRef<any>;
  @Input() classes: string;

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    this.renderer.setAttribute(this.el.nativeElement,'class', "row " + this.classes);
  }
}

@Directive({
  selector: '[bs-row]'
})
export class BsRowDirective implements OnInit {
  private wrapper: ComponentRef<BsRowComponent>;

  @Input('bs-row') classes: string;

  constructor(
    private tplRef: TemplateRef<any>,
    private vcRef: ViewContainerRef,
    private cfr: ComponentFactoryResolver
  ) {
  }

  ngOnInit() {
    const containerFactory = this.cfr.resolveComponentFactory(BsRowComponent);
    this.wrapper = this.vcRef.createComponent(containerFactory, );
    this.wrapper.instance.tpl = this.tplRef;
    this.wrapper.instance.classes = this.classes;
  }
}

usage.md

<htmlTag *bs-row="'cssClasse1 cssClasse2'">