Structural directives in Angular

Tram Ho

What are structural directives?

In Angular there are 3 types of directives:

  1. Component – directive with the template
  2. Structural directives – change the DOM layout by adding and removing DOM elements.
  3. Attribute directives – change the look or behavior of an element, component, or another directive.
  • Structural directives are responsible for the HTML layout. They shape or reshape the structure of the DOM, often by deleting or adding or manipulating elements.
  • Like other directives, you can apply structural directives to the host element . They then do whatever it has to do with the host element and its descendants.
  • Here I have mentioned the host element I will talk through for everyone to understand. To turn a component into something visible in the DOM, you must associate the component with an elementDOM which is called the host element , it can listen. event, update properties, can call methods on it.

For Directive . It is an element that the directive is attached to. For example, h1 is the host element

For Component, it is the selector of the component

You will see there are 3 directives or use ngIf , ngFor , ngSwitch

I will not talk about how to use them here because it is not that difficult. but I will focus on explaining how they work.

We are talking about directives in this post which means we are talking about ngIf and NgIf . NgIf is referencing the directive class and ngIf is referencing the attribute name of the directive.

Directive class refers to its properties and what it does. attribute name when talking about how to apply them to an HTML template element.

As above, in my post I have listed three types of directives in Angular, one of them is the directive attribute that changes the look or behavior of an element, component, or another directive. It can be applied multiple directive attributes on a single host element.

For structural directives , they can be applied only on one host element. We can’t just use ngIf , ngFor or ngSwitch for a host element, right. Well of course Angular won’t let you do that. If you try to include * ngIf, * ngFor on the same element

The reason is:

Structural directives like ngFor can do the complex work of the host element and child element. So it will be difficult to find out which directives are applied before or after or cancel each other’s effects. When there are two directives, we cannot decide which one to take precedence.

How does directive work?

  1. We will find out through * ngIf

In fact, as we can see, it doesn’t use CSS to hide it, it adds and removes them from the DOM

When the condition is false, it removes the host element from the DOM. Separate it from the DOM event, detach from the component when it detects a change, and destroy it. Components and DOM nodes can be garbage collected and free up memory.

  1. Is it better to remove them from the DOM than to hide them?

The difference between hide and delete doesn’t make much sense if it’s plain text. It only really makes a difference when the component uses a lot of resources.

If when hiding a component, its behavior is still active, still attached to the DOM, continue to listen event. Angular can still track changes that may affect data binding. So even if the component is hidden, it will continue to function.

We can see the face like:

  • The rendering is quick, the previous component state is kept intact and always ready to render. The component does not re-initialize this is a potentially expensive operation.

What’s inside *ngFor ?

  • Directive ngForOf is commonly used in the form shorthand *ngFor . Like this example, the template that will be displayed for each loop is the content of an element that has no directive yet.

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

Local variables

NgForOf allows NgForOf local variables to be exported:

  • $implicit: T : Value of the current element in the repeating list
  • index: number : index of the current iteration
  • count: number : Number of items in the list
  • first: boolean : True: If the first item in the list
  • last:boolean : True: If the last item in the list
  • even: true : If the element in the index is even
  • odd: true : If the element is at an odd index

We can access the exported *ngFor variables of two types:

Change propagation

  • When the content of the loop changes ngForOf makes changes corresponding to the DOM:
  1. When an item is added, a new instance of the template is added to the DOM
  2. When an item is deleted, its instance template is removed from the DOM.
  3. When items are rearranged, their respective templates are rearranged in the DOM.

In *ngFor have config help improve its performance tracking algorithm is customizable default, it provides us chho trackBy with ngForOf . trackby provided with 2 parameters input index and item . Angular will tracking value varies as a function returns.

*ngIf ?

  • This is a structural directive that displays the view (template) portion according to a condition
  • This is the most commonly used structural directive, and the template else defaults to blank
  • Its shorthand form *ngIf="condition" , is usually used to provide as an attribute of the anchor element to the *ngIf="condition" template. Angular also extends this to a more explicit syntax where the anchored element is not already in the template

shorthand syntax:

Simple form with expanded syntax:

Form with an “else” block:

Inside NgSwitch directives

Here is the syntax

  • The value of the expression assigned to [NgSwitch] if present is displayed
  • [NgSwitch] itself is not a structural directive. It’s just one attributes directive that controls the behavior of two other conversion directives. That’s why we write it as [NgSwitch], not * ngSwitch
  • NgSwitchCase and NgSwitchDefault are structural directives. You will attach them to the element so it looks like that ( <some-element *ngSwitchDefault>...</some-element> ) An NgSwitchCase shows host element when its value matches the switch value. NgSwitchDefault will show up when its sibling cases don’t have a match. You can see it’s almost like any other language switch.

Reference source :

Share the news now

Source : Viblo