×
iFour Logo

An important guide on Angular Directives and their types

iFour Team - May 26, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

An important guide on Angular Directives and their types

What are Angular Directives?


Directives are instructions in the DOM that specify the way to place your components and business logic within Angular. These are basically custom HTML attributes that tell angular to alter the style or design or behavior of the DOM elements. Directives are building blogs of the angular applications.

Angular Directive is largely a category with a @Directive decorator. Decorators are methods that simply modify JavaScript classes.

What are the types of Angular Directives?


There are three kinds of Angular Directives:

  1. Components
  2. Attribute Directives
  3. Structural Directives

Components:

In component directives, there are three parameters.

  • (i) selector: It tells the template tag which specifies the beginning and end of the Component.
  • (ii) templateUrl: It specifies the template used for the component.
  • (iii)styleUrls: It consists of all the fashion format for the actual component.

Let’s understand component directive by Example:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
}
              

Attribute Directive

Attribute Directives listen and modify the behaviour of the DOM elements.

The most common attribute directives are following:

 

(i)NgClass:

NgClass adds and removes CSS classes to DOM elements. There are Expressions in the NgClass like;

(a) String: This CSS class would accept the string when passed.

Following is that the Example of String in NgClass:

Passing String in class:

Passing String in class:

(b)Object: Passing the object in button as true in ngClass.

Following is that the Example of Object in NgClass:

Passing object in class:

Passing object in class:

(c)Array: These CSS classes declared as array elements are added

Following is that the Example of Array in NgClass:

Passing Array in Class:

Passing Array in Class:

 

(ii)NgStyle:

  • It is used to style the properties of Angular.
  • And many inline styles can be set simultaneously by binding the ngstyle.
 

Following is an Example of NgStyle:

Hello! This is the Example of ngStyle directive

Hello! This is the Example of ngStyle directive

The Output of this Example is here:

 
ngstyle_directive
The Output of this Example is here:

(iii)NgModel:

  • NgModel is a directive that binds the input, select, checkbox, date picker, span, etc., and stores the specified variable.
  • It is also used in the Form Variables.
  • It is additionally applied in Form Validations.
  • NgModel exported from the FormsModule.
  • NgModel is an extremely useful concept within Angular.
  • It is additionaly called Two-way Data Binding.

Following is an example of NgModel:

You can see the code which is within the component.html file. In this example, we can bind the name with the ngModel.

 
            

{{NAME}}

Now, we give the name variable within the component.ts file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
name='demo';
}
            

Another thing is, once we use NgModel, we must import FormModule in the app.module.ts file. This is shown in the following code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
            

Structural Directive

  • Structural Directives are answerable for the structure and Layout of the DOM element.
  • It won’t hide or display the items on the DOM elements.
  • Structural Directives are easily identified using the ‘*’

There are three built-in structural directives:

  • (i) NgIf
  • (ii) NgFor
  • (iii)NgSwitch
 

(i)NgIf

  • This Directive removes the HTML element if the expression is evaluated as false.
  • If the statement is true, a copy of the Element is added in DOM.

Following is an example of ngIf Directive:

For example, let’s consider component.html file, here we have created a button with show/hide property. Next, we made a condition for showing or hiding the div.


            

Div Content is here..

Then we move to component.ts file. Here, we have created the variable as isShown having Boolean datatype. By default, its value is set to false. Next, we made a button event name as toggleShow(). And here, we have performed the functionality on div to display it or not.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    constructor() { }

    ngOnInit(){
    }
isShown:boolean=false;
    toggleShow(){
      this.isShown=!this.isShown;
}
}
            

And the output is here:

NgIf Directive Without clicking the button
[output:1 of NgIf Directive Without clicking the button]
 

Next, when we click the show/hide button then div is shown and vice-versa. Here it is:

NgIf Directive by Clicks the button
[output:2 of NgIf Directive by Clicks the button]
 

Want to Hire Trustworthy Angular Development Company ? Your Search ends here.

 

(ii)NgFor

This Directive is used as a repeat Part of HTML Elements once per item from a Collection.

Following is an example of ngFor condition.

In the component.html file, we have created an array of Data with variables that bind them and created a loop for the data array.


 
{{login.login_id}} {{login.name}} {{login.designation}}

Next, we create an array with the variables in the compoenent.ts file.

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  Data=[
    {"login_id":101,"name":"ABC","designation":"Developer"},
    {"login_id":102,"name":"DEF","designation":"Trainee"},
    {"login_id":103,"name":"EFG","designation":"HR"},
    {"login_id":104,"name":"HI","designation":"Engineer"}]; 
 constructor() {
     }
    ngOnInit(){
    }
}
            

Here is the output for that code:

Output of the NgFor Directive of login data
[Output of the NgFor Directive of login data]
 

(iii)NgSwitchCase

  • NgSwitchCase displays one element from a possible set of elements based on conditions.

Here is an example of NgSwitchCase.

First, we create a Class for the login. which is named as login.ts.

export class login{
  constructor(
      public login_id:number,
      public name:string,
      public designation:string
  ){}
                
}
            

Then next, we make a SwitchCase in the component.html file.

In this HTML file, we make a for loop for the login data and then we perform a Switch Case for the values.

                    
            

Now, we make an Array of login in the component.ts file.

In the following example, we imported the login class here. Then we created an array of login and assign variables to it. However, the by-default SelectedValue would be ‘Abc’.

import { Component, OnInit } from '@angular/core';
import { login } from "./login";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  login:login[]=[
    {login_id:1, name:"Abc",designation:"trainee"},
    {login_id:2,name:"Def",designation:"developer"},
    {login_id:3,name:"Mno",designation:"HR"},
    {login_id:4,name:"Xyz",designation:"Tester"},
    {login_id:5,name:"Ghi",designation:"Senior"},
    {login_id:6,name:"Klo",designation:"QA"},
    
  ];
  selectedlists?:login;
  selectedvalue:string="Abc";
  constructor() {
  }
            
  onSelect(login:login){
    this.selectedlists=login;
  }
             
ngOnInit(){
}
            

Here is the output of this Code:

All the names are shown in the dropdown.

output of the NgSwitchCase in dropdown
[output of the NgSwitchCase in dropdown]

Conclusion


Angular directives are contemplated as the building blocks of application and have great importance. In this blog, we have seen what are Angular Directives and their types. We use angular directives in the conditions, loops, for animating, etc. Angular directives are very useful in developing fascinating applications and operate a wide array of data smoothly.

An important guide on Angular Directives and their types Table of Content 1. What are Angular Directives? 2. What are the types of Angular Directives? 2.1. Components 2.2. Attribute Directive 2.3. Structural Directive 3. Conclusion What are Angular Directives? Directives are instructions in the DOM that specify the way to place your components and business logic within Angular. These are basically custom HTML attributes that tell angular to alter the style or design or behavior of the DOM elements. Directives are building blogs of the angular applications. Angular Directive is largely a category with a @Directive decorator. Decorators are methods that simply modify JavaScript classes. What are the types of Angular Directives? There are three kinds of Angular Directives: Components Attribute Directives Structural Directives Components: In component directives, there are three parameters. (i) selector: It tells the template tag which specifies the beginning and end of the Component. (ii) templateUrl: It specifies the template used for the component. (iii)styleUrls: It consists of all the fashion format for the actual component. Let’s understand component directive by Example: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { } Attribute Directive Attribute Directives listen and modify the behaviour of the DOM elements. The most common attribute directives are following:   (i)NgClass: NgClass adds and removes CSS classes to DOM elements. There are Expressions in the NgClass like; (a) String: This CSS class would accept the string when passed. Following is that the Example of String in NgClass: Passing String in class: Button Passing String in class: (b)Object: Passing the object in button as true in ngClass. Following is that the Example of Object in NgClass: Passing object in class: Button Passing object in class: (c)Array: These CSS classes declared as array elements are added Following is that the Example of Array in NgClass: Passing Array in Class: Button Passing Array in Class:   (ii)NgStyle: It is used to style the properties of Angular. And many inline styles can be set simultaneously by binding the ngstyle. Read More: Angular Login With Session Authentication   Following is an Example of NgStyle: Hello! This is the Example of ngStyle directive Hello! This is the Example of ngStyle directive The Output of this Example is here:   The Output of this Example is here: (iii)NgModel: NgModel is a directive that binds the input, select, checkbox, date picker, span, etc., and stores the specified variable. It is also used in the Form Variables. It is additionally applied in Form Validations. NgModel exported from the FormsModule. NgModel is an extremely useful concept within Angular. It is additionaly called Two-way Data Binding. Following is an example of NgModel: You can see the code which is within the component.html file. In this example, we can bind the name with the ngModel. {{NAME}} Now, we give the name variable within the component.ts file. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { name='demo'; } Another thing is, once we use NgModel, we must import FormModule in the app.module.ts file. This is shown in the following code. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from "@angular/forms"; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Structural Directive Structural Directives are answerable for the structure and Layout of the DOM element. It won’t hide or display the items on the DOM elements. Structural Directives are easily identified using the ‘*’ There are three built-in structural directives: (i) NgIf (ii) NgFor (iii)NgSwitch   (i)NgIf This Directive removes the HTML element if the expression is evaluated as false. If the statement is true, a copy of the Element is added in DOM. Following is an example of ngIf Directive: For example, let’s consider component.html file, here we have created a button with show/hide property. Next, we made a condition for showing or hiding the div. Show/hide Div Content is here.. Then we move to component.ts file. Here, we have created the variable as isShown having Boolean datatype. By default, its value is set to false. Next, we made a button event name as toggleShow(). And here, we have performed the functionality on div to display it or not. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { constructor() { } ngOnInit(){ } isShown:boolean=false; toggleShow(){ this.isShown=!this.isShown; } } And the output is here: [output:1 of NgIf Directive Without clicking the button]   Next, when we click the show/hide button then div is shown and vice-versa. Here it is: [output:2 of NgIf Directive by Clicks the button]   Want to Hire Trustworthy Angular Development Company ? Your Search ends here. See here   (ii)NgFor This Directive is used as a repeat Part of HTML Elements once per item from a Collection. Following is an example of ngFor condition. In the component.html file, we have created an array of Data with variables that bind them and created a loop for the data array.   {{login.login_id}} {{login.name}} {{login.designation}} Next, we create an array with the variables in the compoenent.ts file. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { Data=[ {"login_id":101,"name":"ABC","designation":"Developer"}, {"login_id":102,"name":"DEF","designation":"Trainee"}, {"login_id":103,"name":"EFG","designation":"HR"}, {"login_id":104,"name":"HI","designation":"Engineer"}]; constructor() { } ngOnInit(){ } } Here is the output for that code: [Output of the NgFor Directive of login data]   (iii)NgSwitchCase NgSwitchCase displays one element from a possible set of elements based on conditions. Here is an example of NgSwitchCase. First, we create a Class for the login. which is named as login.ts. export class login{ constructor( public login_id:number, public name:string, public designation:string ){} } Then next, we make a SwitchCase in the component.html file. In this HTML file, we make a for loop for the login data and then we perform a Switch Case for the values. {{login.name}} {{login.name}} {{login.name}} {{login.name}} {{login.name}} {{login.name}} {{login.name}} Now, we make an Array of login in the component.ts file. In the following example, we imported the login class here. Then we created an array of login and assign variables to it. However, the by-default SelectedValue would be ‘Abc’. import { Component, OnInit } from '@angular/core'; import { login } from "./login"; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { login:login[]=[ {login_id:1, name:"Abc",designation:"trainee"}, {login_id:2,name:"Def",designation:"developer"}, {login_id:3,name:"Mno",designation:"HR"}, {login_id:4,name:"Xyz",designation:"Tester"}, {login_id:5,name:"Ghi",designation:"Senior"}, {login_id:6,name:"Klo",designation:"QA"}, ]; selectedlists?:login; selectedvalue:string="Abc"; constructor() { } onSelect(login:login){ this.selectedlists=login; } ngOnInit(){ } Here is the output of this Code: All the names are shown in the dropdown. [output of the NgSwitchCase in dropdown] Conclusion Angular directives are contemplated as the building blocks of application and have great importance. In this blog, we have seen what are Angular Directives and their types. We use angular directives in the conditions, loops, for animating, etc. Angular directives are very useful in developing fascinating applications and operate a wide array of data smoothly.

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 

Blog Our insights

Key factors to consider before choosing Customized or Off-the-shelf software
Key factors to consider before choosing Customized or Off-the-shelf software

Table of Content 1.What is COTS? 2.What are the advantages of Off-the-shelf software development? 3.What are the advantages of Custom software development? 4.Customized...

Off-the-shelf vs custom software development: Choosing the best for business success.
Off-the-shelf vs custom software development: Choosing the best for business success.

Table of Content 1.What is Custom software development? 2.What is Off-the-shore software development? 3.How to choose the best software for business? 4.Off-the-shelf...

Java Development Unleashed: The Next Chapter of Revolutionary Trends and Developments
Java Development Unleashed: The Next Chapter of Revolutionary Trends and Developments

Table of Content 1.Does Java have scope in the future? 2.Will Java developers still be in demand in 2023? 3.Emerging trends and key developments to know for Java 4.What...