Skip to content

Instantly share code, notes, and snippets.

@killan
Created Feb 9, 2021
Embed
What would you like to do?
Angular 11 encapsulation system
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;
}
}

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment