Structural directive in Angular alter the DOM by adding/removing
elements to the DOM based on specific conditions. Attribute
directives on the other hand can be used to app specific properties /
styles to the element which is using the directive. We saw the example of the highliter
Attribute directive which added a background color for highlighting the element
which uses the directive.
ngIf is a built-in structural directive, based on the condition/expression we pass to this directive we can show/hide a block of elements in the DOM. Structural directives are represented with a * symbol before the directing like *ngIf.
The ngIf directive deals with a single condition, the other buit-in directive *ngFor directive is used to deal with a range/array of values. This directive can be used to render a list of elements in an array in a pre-defined template. This directive is similar to the ng-repeat directive in AngularJS, they are typically used to display a list of elements in a pre-defined style/template in the view.
We can create our own custom structural directives in Angular, the structural directive should be able to add/remove elements to the DOM based on conditions to do this we need to inject a view container reference and a template reference to the directive.
The view container reference represents the container where we can add/remove elements inside the actual DOM. It is a reference to the container in the DOM where we add/remove elements. Template reference is the reference to the element on which the directive is applied.
ngIf is a built-in structural directive, based on the condition/expression we pass to this directive we can show/hide a block of elements in the DOM. Structural directives are represented with a * symbol before the directing like *ngIf.
The ngIf directive deals with a single condition, the other buit-in directive *ngFor directive is used to deal with a range/array of values. This directive can be used to render a list of elements in an array in a pre-defined template. This directive is similar to the ng-repeat directive in AngularJS, they are typically used to display a list of elements in a pre-defined style/template in the view.
We can create our own custom structural directives in Angular, the structural directive should be able to add/remove elements to the DOM based on conditions to do this we need to inject a view container reference and a template reference to the directive.
The view container reference represents the container where we can add/remove elements inside the actual DOM. It is a reference to the container in the DOM where we add/remove elements. Template reference is the reference to the element on which the directive is applied.
The * mark in
the structural directive is a syntactic sugar,
internally angular converts this into a template syntax as follows.
<div *ngIf="condition">Hello Structural Directive</div>
<div *ngIf="condition">Hello Structural Directive</div>
Gets converted to
<ng-template
[ngIf]="condition">
<div>Hello
Structural Directive</div>
</ng-template>
No comments:
Post a Comment