Structural Directives - The Asterisk (*) Prefix
The (*) is a syntactic sugar. You'll have a ng-template wrapped arround the host element with the *directive.
This snippet
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: []
})
export class AppComponent {
la = [1, 2, 3];
}
app.component.html
<div *bla="la">
some content
</div>
will be transformed into
<ng-template [bla]="la">
<div>
some content
</div>
</ng-template>
- The
bla
directive moved tong-template
element where it is now a property binding- meaning the BlaDirective should have an
@Input() bla
which will get the value ofla
.
- meaning the BlaDirective should have an
- The div element who hosted the *directive moved inside the
ng-template
.
and you need the directive like this
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[bla]'
})
export class BlaDirective {
@Input() set bla(value) {
console.log(value);
}
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) { }
}
Structural directives need TemplateRef and ViewContainer.
TODO display the content of the template
No Comments