Skip to content
Readerstacks logo Readerstacks
  • Home
  • Softwares
  • Angular
  • Php
  • Laravel
  • Flutter
Readerstacks logo
Readerstacks
Directives in angular

What is directives and types of directives in angular?

Aman Jain, September 1, 2021February 8, 2024

Directives in angular are custom tags and custom attributes of html which is controlled by class and decorators. Using directives we can change the behaviour, style and logic of a specific area.

Example:

helloworld.component.ts

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

@Component({
  selector: ‘hello-world’,
  template: ‘Hello world component/directive’
 
})
export class HelloWorld implements OnInit {

 constructor() {

   
  }
  ngOnInit() {

  }
}

Xyz.compenent.html

<hello-world></hello-world>

Output:
Hello world component/directive

Types of Directives in Angular:

  1. Component 
  2. Attributes Directive
  3. Structural Directive

1. Component :

Angular page is group of components, we use component everywhere in the angular project. so, we can say that components are main part of an angular application.
Component contains decorators and class. Decorator contains the details of html template, css, change detection strategy and the component selector name.

Let’s create a component using ng generate command

ng g component helloworld

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

@Component({
  selector: ‘hello-world’,
  template: ‘Hello world component/directive’
 
})
export class HelloWorld implements OnInit {

 constructor() {

   
  }
  ngOnInit() {

  }
}

2. Attribute Directive

Attribute directive is used the change the behaviour of element, component or directive. there is some in-build structural directive ngStyle, ngClass, ngModel.

Example:

<div [ngClass]="isActive ? 'active' : ''">This div is active container</div>

3. Structural Directive

Structural directives are directives which add or remove the elements from the dom.

There is 3 in-built structural directives in angular.

  1. ngFor
  2. ngIf
  3. ngSwitch

Example:

<hello-world *ngIf="isActive" [post]="post"></hello-world>

Related

Javascript Angular

Post navigation

Previous post
Next post

Related Posts

Javascript Angular Dynamic Style CSS with Example

Angular Dynamic Style CSS with Example

October 5, 2022March 16, 2024

In this blog post, we’ll explore Angular dynamic style CSS with example in component’s styles based on certain conditions. Sometimes in our application we want dynamically change the color, size, font, background images so Angular provides various ways to conditionally apply styles to elements. In this post, we’ll explore three…

Read More
Javascript Setup Client side javascript validation

How to Setup Client side javascript validation ?

September 16, 2021September 29, 2021

In this tutorial we will learn javascript validation without using any third party library. we will validate the simple form with 5 inputs fields. Let’s start with simple steps Step 1: Create a html file Firstly we are going to create html file which contains a form with basic fields….

Read More
Javascript Angular Click Event on Input Example

Angular Click Event on Input Example

September 22, 2022March 16, 2024

Angular Click Event on Input is an Angular event binding it triggers when user click or tap any DOM element and it fires a event of (click). Input events in angular can be handled using input and output decorators and in this tutorial we will learn Angular Click Event on…

Read More

Aman Jain
Aman Jain

With years of hands-on experience in the realm of web and mobile development, they have honed their skills in various technologies, including Laravel, PHP CodeIgniter, mobile app development, web app development, Flutter, React, JavaScript, Angular, Devops and so much more. Their proficiency extends to building robust REST APIs, AWS Code scaling, and optimization, ensuring that your applications run seamlessly on the cloud.

Categories

  • Angular
  • CSS
  • Dart
  • Devops
  • Flutter
  • HTML
  • Javascript
  • jQuery
  • Laravel
  • Laravel 10
  • Laravel 11
  • Laravel 9
  • Mysql
  • Php
  • Softwares
  • Ubuntu
  • Uncategorized

Archives

  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • October 2024
  • July 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • July 2023
  • March 2023
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021

Recent Posts

  • Mapping Together: The Vibrant Spirit of OpenStreetMap Japan
  • Understanding High Vulnerabilities: A Deep Dive into the Weekly Summary
  • Building a Million-Dollar Brand: The Journey of Justin Jackson
  • Mastering Schedule Management with Laravel Zap
  • The Resilience of Nature: How Forests Recover After Fires
©2023 Readerstacks | Design and Developed by Readerstacks
Go to mobile version