Angular Structural Directives

This guide looks at how Angular manipulates the DOM with structural directives and how you can write your own structural directives to do the same thing and explained with easy example.

What are structural directives?

Structural directives are responsible for HTML layout. They shape or reshape the DOM’s structure, typically by adding, removing, or manipulating elements.

Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.

sample code for NgIf directive

No brackets. No parentheses. Just *ngIf set to a string.

The asterisk (*) prefix

Surely you noticed the asterisk (*) prefix to the directive name and wondered why it is necessary and what it does.

The asterisk is “syntactic sugar” for something a bit more complicated. Internally, Angular translates the *ngIf attribute into a <ng-template> element, wrapped around the host element, like this.

• The *ngIf directive moved to the <ng-template> element where it became a property binding,[ngIf].
• The rest of the <div>, including its class attribute, moved inside the <ng-template> element.

Three of the common, built-in structural directives are NgIf, NgSwitch, NgFor. you can see how to represent the those three structural directive in code in below.

What is NgIf ?

NgIf is the simplest structural directive and the easiest to understand. It takes a boolean expression and makes an entire chunk of the DOM appear or disappear.

Important

The difference between [hidden]='false' and *ngIf='false' is that the first method simply hides the element. The second method with ngIf removes the element completely from the DOM.

We define the condition by passing an expression to the directive which is evaluated in the context of its host component.

Get Siva’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The syntax is: *ngIf="<condition>"

What is NgSwitch ?

This directive allows us to render different elements depending on a given condition, in fact the NgSwitch directive is actually a number of directives working in conjunction, like so:

@Component({
  selector: 'ngswitch-example',
  template: `<h4>NgSwitch</h4>
<ul *ngFor="let person of people"
    [ngSwitch]="person.country"> (1)

  <li *ngSwitchCase="'UK'" (2)
      class="text-success">{{ person.name }} ({{ person.country }})
  </li>
  <li *ngSwitchCase="'USA'"
      class="text-primary">{{ person.name }} ({{ person.country }})
  </li>
  <li *ngSwitchCase="'HK'"
      class="text-danger">{{ person.name }} ({{ person.country }})
  </li>
  <li *ngSwitchDefault (3)
      class="text-warning">{{ person.name }} ({{ person.country }})
  </li>
</ul>`
})
class NgSwitchExampleComponent {

  people: any[] = [
    {
      "name": "Douglas  Pace",
      "age": 35,
      "country": 'MARS'
    },
    {
      "name": "Mcleod  Mueller",
      "age": 32,
      "country": 'USA'
    },
    {
      "name": "Day  Meyers",
      "age": 21,
      "country": 'HK'
    },
    {
      "name": "Aguirre  Ellis",
      "age": 34,
      "country": 'UK'
    },
    {
      "name": "Cook  Tyson",
      "age": 32,
      "country": 'USA'
    }
  ];
}

If we are faced with multiple conditions a cleaner alternative to multiple nested NgIf statements is the NgSwitch series of directives.

What is NgFor ?

NgFor is a built-in template directive that makes it easy to iterate over something like an array or an object and create a template for each item.

We can use this directive, if we want to display a dynamic list, for example, an array of elements on the screen. This array could look like this example data:

const array = [
  {
    guid: '900ea552-ef68-42cc-b6a6-b8c4dff10fb7',
    age: 32,
    name: 'Powers Schneider',
  },
  {
    guid: '880381d3-8dca-4aed-b207-b3b4e575a15f',
    age: 25,
    name: 'Adrian Lawrence',
  },
  {
    guid: '87b47684-c465-4c51-8c88-3f1a1aa2671b',
    age: 32,
    name: 'Boyer Stanley',
  },
]

And we want the result to be generated HTML that could look like this:

<ul>
  <li>Powers Schneider, 32</li>
  <li>Adrian Lawrence, 25</li>
  <li>Boyer Stanley, 32</li>
</ul>

If you want the same output that shows above you need to alter with NgFor like this:

<ul>
  <li *ngFor="let element of array"></li>
</ul>

Did you notice that the syntax looks like a regular forEach loop? Well, actually it works quite the same way.

With the statement “let element of array” we are defining a variable “element”, that holds a reference to the current array element.

Knowing that we can now add the persons’ name and the age to each list element. We do so by using the “element” variable we defined inside of the ngFor directive:

<ul>
  <li *ngFor="let element of array">{{element.name}}, {{element.age}}</li>
</ul>

Important

We can’t have two structural directives, directives starting with a *, attached to the same element.

The below code would not work:

<ul *ngFor="let person of people" *ngIf="person.age < 30">
  <li>{{ person.name }}</li>
</ul>

Conclusion

In this article we discovered, how we can use the structural directive such as NgIf, NgSwitch, NgFor in our angular application.

I hope you liked this article. If you did, please share it with your friends!

Happy Coding!