Built-in directives in Angular
Last Updated :
28 Mar, 2024
Directives are markers in the Document Object Model(DOM). Directives can be used with any controller or HTML tag which will tell the compiler what exact operation or behavior is expected. There are some directives present that are predefined but if a developer wants he can create new directives (custom-directive).
There are basically 3 types of directives and each type has some built-in directives. In this article, we will discuss all 3 types of directives and their built-in directives.
1. Component Directives
Components are directives with templates. They are the building blocks of Angular applications, encapsulating both the UI (User Interface) and the behavior of a part of the application. Components are used to create reusable and modular UI elements. They are declared using the @Component decorator and typically have a corresponding HTML template.
Syntax: In the component below, we have used the @Component here to define a component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {}
2. Attribute Directives
Attribute directives are used to change the appearance or behavior of a DOM element by applying custom attributes. These directives are applied to elements as attributes and are denoted by square brackets. Attribute directives are often used for tasks such as dynamic styling, input validation, or DOM manipulation.
Built-in Attribute Directives:
1. ngClass: The NgClass directive allows us to conditionally apply CSS classes to HTML elements.
Syntax:
<div [ngClass]="{'class-name': condition}">
<!-- Content here -->
</div>
2. ngStyle: The NgStyle directive enables you to conditionally apply inline styles to HTML elements.
Syntax:
<div [ngStyle]="{'property': 'value'}">
<!-- Content here -->
</div>
3. ngModel: The NgModel directive provides two-way data binding for form elements, syncing data between the model and the view.
Syntax:
<input [(ngModel)]="property">
Example:
HTML
<!-- app.component.html -->
<div class="container">
<h1 class="title">GeeksforGeeks</h1>
<div class="content">
<div [ngClass]="{'highlight': isHighlighted, 'italic': isItalic}">
This div's classes are dynamically applied based on conditions.
</div>
<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">
This div's styles are dynamically applied based on properties.
</div>
<input type="text" [(ngModel)]="username" class="input-field">
<p class="greeting">Hello, {{ username }}!</p>
</div>
</div>
CSS
/* app.component.css */
.container {
text-align: center;
}
.title {
color: green;
}
.content {
margin-top: 20px;
}
.input-field {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
.greeting {
margin-top: 20px;
}
JavaScript
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isHighlighted: boolean = true;
isItalic: boolean = false;
textColor: string = 'blue';
fontSize: number = 18;
username: string = '';
}
JavaScript
//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:

3. Structural Directives
Structural directives are responsible for manipulating the DOM layout by adding, removing, or manipulating elements based on conditions. They are denoted by an asterisk (*) preceding the directive name and are commonly used to alter the structure of the DOM based on conditions. Examples include , , and ngSwitch.
Built-in Attribute Directives:
1. ngIf: The ngIf directive conditionally includes or removes an element based on a provided expression.
Syntax:
<element *ngIf="condition">
<!-- Content to display when condition is true -->
</element>
2. ngFor: The ngFor directive iterates over a collection and instantiates a template once for each item in the collection.
Syntax:
<element *ngFor="let item of items">
<!-- Content to repeat for each item -->
</element>
3. ngSwitch: The ngSwitch directive is similar to a switch statement in programming languages. It displays one element from a set of elements based on a provided expression.
Syntax:
<element [ngSwitch]="expression">
<element *ngSwitchCase="value1"> <!-- Content for case 1 -->
</element>
<element *ngSwitchCase="value2"> <!-- Content for case 2 -->
</element>
<!-- More ngSwitchCase elements for other cases -->
<element *ngSwitchDefault> <!-- Default content -->
</element>
</element>
Example:
HTML
<!-- app.component.html -->
<div class="container">
<h1 class="title">GeeksforGeeks</h1>
<div class="content">
<div *ngIf="isLoggedIn" class="message">
Welcome to {{ username }}!
</div>
<ul *ngIf="items.length > 0" class="list">
<li *ngFor="let item of items" class="list-item">
{{ item }}
</li>
</ul>
<div [ngSwitch]="color" class="color-switch">
<p *ngSwitchCase="'red'" class="color-message">Red color selected</p>
<p *ngSwitchCase="'blue'" class="color-message">Blue color selected</p>
<p *ngSwitchCase="'green'" class="color-message">Green color selected</p>
<p *ngSwitchDefault class="color-message">Please select a color</p>
</div>
</div>
</div>
CSS
/* app.component.css */
.container {
text-align: center;
}
.title {
color: green;
}
.content {
margin-top: 20px;
}
.message {
font-size: 20px;
color: green;
margin-bottom: 20px;
}
.list {
list-style-type: none;
padding: 0;
}
.list-item {
font-size: 16px;
margin-bottom: 5px;
}
.color-switch {
margin-top: 20px;
}
.color-message {
font-size: 18px;
margin-top: 10px;
}
JavaScript
// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
isLoggedIn: boolean = true;
username: string = 'GFG';
items: string[] = ['Item 1', 'Item 2', 'Item 3'];
color: string = 'red';
}
Output:

Similar Reads
Built-in Structural Directives in Angular
Directives in Angular are nothing but the classes that allow us to add and modify the behavior of elements. Using directives in angular we can modify the DOM (Document Object Module) styles, handle user functionality, and much more. In this article, we will see more about Built-in structural directi
3 min read
Attribute Directives in Angular
Attribute directives are a powerful tool that allows you to manipulate the behavior and appearance of HTML elements. In this article, you will see the fundamentals of attribute directives. Table of Content What are Attribute Directive?Benefits of Attribute DirectiveTypes of Attribute DirectivesSteps
5 min read
Recursion in Angular Directives
Recursion in Angular directives refers to the ability of a directive to include instances of itself within its template. This allows for the creation of nested structures and dynamic rendering based on the data. Recursive directives are useful when dealing with hierarchical data or tree-like structu
4 min read
AngularJS ng-non-bindable Directive
The ng-non-bindable Directive in AngularJS is used to specify that the specific content of HTML should not be compiled i.e the contents should be ignored by AngularJS. It can be used when we want to display code snippets instead of compiled output. Syntax: <element ng-non-bindable> Contents...
1 min read
AngularJS ng-init Directive
The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: <element ng-init = "expression"
1 min read
AngularJS ng-if Directive
The ng-if Directive in AngularJS is used to remove or recreate a portion of the HTML element based on an expression. The ng-if is different from the ng-hide directive because it completely removes the element in the DOM rather than just hiding the display of the element. If the expression inside it
2 min read
What is a custom directive in Angular?
Angular, a popular framework for building dynamic web applications, offers a powerful feature known as custom directives. These directives extend the functionality of HTML elements, enabling to create reusable components and add behavior to their applications. In this article, we'll learn about the
4 min read
What are Directives in AngularJS ?
AngularJS directives are extended HTML attributes having the prefix ng-. Directives are markers on the DOM element which tell Angular JS to attach a specified behavior to that DOM element or even transform the DOM element with its children. During compilation, the HTML compiler traverses the DOM mat
7 min read
AngularJS ng-bind-html Directive
The ng-bind-html Directive in AngularJS is used to bind the innerHTML of an HTML element to application data and remove dangerous code from the HTML string. $sanitize service is a must for the ng-bind-html directive. It is supported by all HTML elements. Syntax: <element ng-bind-html="expression"
2 min read
AngularJS ng-include Directive
AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include directive. The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application. These are added as child nodes
2 min read