Introduction to Structural Directives
While attribute directives in Angular enable us to specify an attribute on an element in our templates to enhance, to change the behavior, or to alter the display of the element, structural directives enable us to efficiently create, remove and alter existing elements in the Document Object Model (DOM).
Similar to attribute directives in that we will be applying the directive to a host element in the DOM. Unlike attribute directives, we can only apply one structural directive the host element.
Structural Directives have a "full" syntax, which is a little cumbersome to use, as well as a much more convenient and easier to use microsyntax. Throughout the course, we'll be using the microsyntax.
Benefits and Costs
Structural directives have both benefits and costs related to the creation and destruction of elements in the DOM.
Creating elements, along with the necessary event listeners, can be expensive. Don't get too caught up in this - it's just good to know that if you start to create thousands, hundreds of thousands, and perhaps even, millions of elements in the DOM it does have a cost and your users could notice a perceived slowness to your application.
Built-in Angular Structural Directives
Angular has three built-in, and very powerful, structural directives:
We'll be covering these structural directives in detail.
As mentioned, we'll be using the convenient microsyntax. Here is an example of the
<div *ngIf="loading"> <spinner></spinner> </div>
At the moment, take note of the asterisk ( * ) that is used in the syntax, which is preceeding the
The full syntax that is applied to the DOM is:
<ng-template [ngIf]="loading"> <div> <spinner></spinner> </div> </ng-template>
ng-template custom element is never rendered to the DOM, rather, it serves to create a
ViewContainerRef instance, which is the view container into which we will render the contents of the
ng-template element. The
ng-template element is the host element for the
NgIf structural directive. Note the square brackets around the directive's
selector, which in this case is
ngIf. To clarify, the class name is
NgIf and the directive's
selector value is