Custom Structural Directive example

Structural directive in Angular manipulate the DOM by adding/removing a set of elements. Attribute directives on the other hand decorate the element with more content/features. Structural directives can be identified with the * mark in front of them. In this example we will create a simple structural directive *ngShow which will show/hide the embedded content based on a condition. Let us start by creating a new directive using the following ng command.

Custom Structural Directive

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.