Structural v/s Attribute directives

Directives are most widely used feature and these are used for extending the power of HTML.

Angular provides some inbuilt directives and you can also create your own custom directives. Custom directives can be declared as @Directive in angular v2 and greater.

In this blog, we will be focusing on the types of inbuilt directives provided by angular.

They can be categorized into two main categories

  • Structural directives
  • Attribute directives

Structural Directives 

  1. Structural directive is basically used for changing the HTML layout .
  2. As the name suggests, it simply changes the structure of the view.
  3. In other words, these directives are basically used when we want to manipulate HTML view by creating or destroying elements from DOM, to add or remove single or multiple elements from DOM.
  4. These directives are easily recognized because these are preceded by asterisk (*) signs .
  5. Some of the common examples of built-in directive are :
  • *ngIf
  • *ngFor
  • *ngSwitch  

Let’s see all these with examples .

*ngFor – This is similar to for loop as it is also used for iterating over the array and creating an element for each array’s element.

<ul>
    <li *ngFor="let item of data"> 
	{{ item }}	
    </li>
</ul>

*ngIf – This directive is commonly used for condition-based purposes as if the condition is true then it will show the element, otherwise it will hide the element.

<div>
    <div *ngIf='isVisible'> 
	This DIV is visible if and only if'isVisible' is true.	
    </div>
</div>

Note – In conditional expression,If there are more than two outputs ( true or false )then the use of NgIf makes code more complicated and messy, so this problem can be resolved with the use of NgSwitch .

*ngSwitch – NgSwitch is also used for conditions-based purpose but used for multiple condions .This can be explained in the following example :

<div [ngSwitch]="fruits">
     <p *ngSwitchCase="'ap'">Apple</p>
     <p *ngSwitchCase="'ma'">Mango</p>
     <p *ngSwitchCase="'or'">Orange</p>
    <p *ngSwitchCase="'ba'">Banana</p>
</div>

“The beautiful thing about learning is that nobody can take it away from you.”

 – B.B. King

Attribute Directive

  1. Attribute Directive is used to modify the appearance or behavior of the component, element or directive.
  2. As the name suggests, it is used as the attribute of an element.
  3. Some Examples of Attribute built-in directive are :
  • ngClass
  • ngStyle

ngClass  : This is used to apply the class to an element based upon the condition as explained below.

<div [ngClass]="{'text-success':country === 'India'}"></div>
// This will set class text-success to the div if the country is India . 

ngStyle :  This is used for applying the style properties to the DOM element.

<div [ngStyle]="{'background-color':fruit === 'Apple' ? 'red' : 'green' }"></<div>
// This will set the background colour of the div to red if fruit is mango else it will set green.

That’s all in this blog. Please share your valuable comments and feedback.

Thank you for reading

Leave a Reply