Summary

Let’s highlight the most important things we need to remember about structural directives.

Generate file

To generate the directive file using Angular CLI, we use the following command which is the same as an attribute directive:

ng generate directive app-custom-directive

Directive syntax

The empty directive class looks like this and is the same as an attribute directive:

@Directive({
  selector: '[appCustomDirective]'
})
export class CustomDirective {
  constructor() { }
}

Asterisk syntax *

We use the asterisk symbol as a prefix if we need to mark a directive as structural in Angular. Doing so makes sure that Angular can use the element as a template instead of rendering it directly, like so:

<div *yourDirective> </div>

The TemplatRef and ViewContainerRef classes

We can inject TemplateRef and ViewContainerRef to gain the ability to manipulate the view, like this:

	constructor(
		private templateRef: TemplateRef<any>,
		private viewContainerRef: ViewContainerRef,
	){}

Render elements

We use TemplateRef and ViewContainerRef to render the element based on the template in the view. The rendered element or view is placed in the view container.

this.viewContainerRef.createEmbeddedView(this.templateRef);

Clear the view

To clear the view container and remove all added nodes, we call the clear function on ViewContainerRef.

this.viewContainerRef.clear();

Other techniques

Techniques such as the Input and Output properties let us bind and pass the data, just like with attribute directives, and can be called when needed.