Angular 13 Directives – Component, Structural & Attribute
Tutorial on Angular Directives In Angular, a directive is a JavaScript or TypeScript-based class. In Angular, you usually specify it as @directive; there are three directives. The following is a list of our directives:
Angular Component Directives
The main class is made up of component directives. It contains information about how the component should be created, processed, and used at runtime.
Angular Structural Directives
When it comes to structural directives, they're all about manipulating dom elements. Before the directive, there is an asterisk (*) prefix. As examples, we can look at *ngFor and *ngIf.
Angular Attribute Directives
Attribute directives are used to change the behaviour and appearance of the dom element. As seen in the example below, you can create your own directive:
Create Custom Directives in Angular 12
In this section, we'll see a lot more of that. Custom directives are created by the user. We'll examine what we can do to create a custom directive. The Angular command line tool will be used to accomplish this. In the Angular command line tool, type the following command to build a custom directive: ng g directive change-color Change-color.directive.ts and change-color.directive.spec.ts will be generated by the command above. In the process, the app.module.ts file is also modified. When the custom directive is built, it appears like this on the Angular command line tool. ng g directive change-color # CREATE src/app/change-color.directive.spec.ts (245 bytes) # CREATE src/app/change-color.directive.ts (151 bytes) # UPDATE src/app/app.module.ts (406 bytes) app.module.ts The custom directive service "ChangeColorDirective" is imported by default by Angular CLI and defined in the declarations array in the app.module.ts file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Custom directive imported here by Angular CLI import { ChangeColorDirective } from './change-color.directive'; @NgModule({ declarations: , imports: , providers: , bootstrap: }) export class AppModule { }
Example of Custom Angular Directive File
A selector property and a directive are stored in the change-color.directive.ts file. Because we assign the custom directive to the view, the things we define in the selector must match in the view. import { Directive } from '@angular/core'; @Directive({ selector: '' }) export class ChangeColorDirective { constructor() { } }
Let’s Create Custom Angular Directive Logic
// Required services for custom directives import { Directive, ElementRef, Renderer2 } from '@angular/core'; @Directive({ selector: '' // Directive selector }) export class ChangeColorDirective { constructor(elem: ElementRef, renderer: Renderer2) { renderer.setStyle(elem.nativeElement, 'color', 'blue'); } } As seen below, add the appChangeColor directive to the app.component.html view - // appChangeColor custom Directive
I got colored by Angular Custom Directive
I hope you will like the content and it will help you to learn Angular 13 Directives – Component, Structural & Attribute If you like this content, do share. Read the full article









