1. 👇💪 Angular Directive
================================================
An Angular directive is a special kind of component that adds behavior to an HTML element
or an Angular component. Directives can manipulate the DOM (Document Object Model),
modify the appearance and behavior of an element, or create new components dynamically.
==================================================================
There are three types of Angular directives:
1. Component Directive:
This is the most commonly used type of directive, and it is responsible
for defining custom elements that act as reusable components. Component directives have their
own template and styles and can receive data and events through input and output bindings.
Exp:-Here's an example of a component directive in Angular:
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
template: `<h1>Hello {{ name }}!</h1>`,
styles: [`h1 { color: green; }`]
})
export class GreetingComponent {
name = 'World';
}
In this example, the @Component decorator defines a new component directive called GreetingComponent.
The selector property specifies the name of the custom element, which is app-greeting.
The template property defines the HTML template that represents the component's view, and the styles property
defines the styles for the component.
To use this component in another part of your application, you would include the app-greeting element in a template:
<app-greeting></app-greeting>
When the application is run, the GreetingComponent will display the greeting message
Output: "Hello World!" in green text.
======================================================================
2. Structural Directive: -
These directives alter the structure of the DOM by adding, removing,
or manipulating elements. Examples of structural directives are ngFor, ngIf, and ngSwitch.
Exp:-Here's an example of a structural directive in Angular:
import { Component } from '@angular/core';
@Component({
selector: 'app-user-list',
template: `
<ul>
<li *ngFor="let user of users">{{ user }}</li>
</ul>
`
})
export class UserListComponent {
users = ['John Doe', 'Jane Doe', 'Jim Smith'];
}
<li *ngFor="let user of users">{{ user }}</li>
The *ngFor syntax tells Angular to treat this as a structural directive.
The let user of users syntax defines a local variable user that will
be set to each item in the users array, one at a time, for each iteration
of the loop. The {{ user }} interpolation displays the current value of the user variable.
When the application is run, the UserListComponent will display a list of users:
Output:-
- John Doe
- Jane Doe
- Jim Smith
=====================================================================
3. Attribute Directive: 👇
Attribute directives change the appearance or behavior of an element
by modifying its attributes. For example, ngClass and ngStyle are attribute directives
that modify an element's class and style, respectively.
Exp:-Here's an example of an attribute directive in Angular:
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[appMakeBold]'
})
export class MakeBoldDirective {
constructor(private elementRef: ElementRef, private renderer: Renderer2) {}
ngOnInit() {
this.renderer.setStyle(this.elementRef.nativeElement, 'font-weight', 'bold');
}
}
In this example, the MakeBoldDirective is an attribute directive that makes text bold.
The @Directive decorator defines the directive and its selector, which is [appMakeBold].
This means that the directive can be used as an attribute on any element, like this:
<p appMakeBold>This text will be bold</p>
The directive's constructor receives two services, ElementRef and Renderer2,
which allow it to access and modify the host element and its styles.
The ngOnInit lifecycle hook sets the font-weight style of the host element to bold.
When the application is run, the MakeBoldDirective will make the text "This text will be bold" bold.
===================
Using directives, you can create reusable and modular components, which can be easily
incorporated into other parts of your application, making your code more readable, maintainable, and testable.
Comments
Post a Comment