Angular Structural Directive

Angular Structural Directive

Angular Structural Directive

In our previous section, we learned about directive and it’s type. In this section, we will learn about structural directives provided by angular framework.

What is structural Directive

You may get some idea from it’s name itself. A simple definition of structural directive is as below :

Structural directives change the DOM layout by adding and removing DOM elements.



Angular Structural Directive



Writing code using Structural Directive

Let’s write some example using predefined structural directive. For that, we first need to create separate component like we do for every example.

Run the project “hello-world” and hit the URL. Make sure your project is running. Now invoke the below command for creating a new component.

ng g c structural-directive --spec false





In this example, I will demonstrate how you can use *ngIf directive to display some message based on some condition. So begin with the component.

src/app/structural-directive/structural-directive.component.ts


import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-structural-directive',
 templateUrl: './structural-directive.component.html',
 styleUrls: ['./structural-directive.component.css']
})
export class StructuralDirectiveComponent implements OnInit {
 errorCode : string = "ER02";
 constructor() { }
 ngOnInit() { }
}


In the above component, i am using a variable “errorCode” which will be used to display some message based on error code it contains.

src/app/structural-directive/structural-directive.component.html

<p *ngIf = "errorCode === 'ER01'">
 <span style="background-color: red">
  There was error while getting response from the server.
 </span>
</p>
<p *ngIf = "errorCode === 'ER02'">
 <span style="background-color: blueviolet">
  Request time out.
 </span>
</p>



You should be able to see the output as below :



Now let’s add else part

Now we know how to use if condition and if comes with else part. So let’s implement else in HTML template as well.

src/app/structural-directive/structural-directive.component.html


<p *ngIf = "errorCode === 'ER01'; else noErrorCode">
 <span style="background-color: red">
  There was error while getting response from the server.
 </span>
</p>
<ng-template #noErrorCode>
 <span style="background-color: green; color: white">
  There are no errors in serving the request.
 </span>
</ng-template>


Couple of things, we need to understand here in the above HTML template. Let’s cover them one by one.

  • ng-template – It is component directive.
  • #noErrorCode – You can create local reference variable like this.

If no error code defined in the “errorCode” property of component then it will simply execute else part. So you will be able to see the output as below.


angular ngif else directive


The *ngFor Directive

You may want to display list of the elements on your HTML template, we can achieve this with the help of *ngFor directive which can iterate on array.

src/app/structural-directive/structural-directive.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-structural-directive',
 templateUrl: './structural-directive.component.html',
 styleUrls: ['./structural-directive.component.css']
})
export class StructuralDirectiveComponent implements OnInit {
 itemList: [{
  name: string,
  description: string
 }];
 constructor() {
 this.itemList = [{
  name: 'Mac air',
  description: 'Mac air laptop'
 },
 {
  name: 'Lenovo G50',
  description: 'Lenovo G50 laptop'
 }
 ];
 }
 ngOnInit() { }

}


Now let’s iterate and display items on the HTML template with the *ngFor directive as below.

src/app/structural-directive/structural-directive.component.html

<p>
 Your item list :
</p>
<br />
<table>
 <tr>
  <th>Item Name</th>
  <th>Description</th>
 </tr>
 <tr *ngFor = "let item of itemList">
  <td>{{item.name}}</td>
  <td>{{item.description}}</td>
 </tr>
</table>


You should be able to see the output as below.

Angular ngfor directive




Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *