Angular7 Directives

Angular7 Directives

In Angular directives is a js class, which is declared as @directive. We have at Angular 3 directives. The following directives are mentioned –

These form the main class with details of how to process, instantiate and use the component at runtime.

A directive on structure basically deals with controlling the dom components. Until the directive, structural directives have a symbol of *. E.g., * ngIf and * ngFor.

Attribute directives are about changing the dom feature look and behaviour. You may build your own directives as set out in the section below.

How to Create Custom Directives?

We will discuss in this section about custom directives to be used in components.

We create custom directives and aren't standard.

Let's look at how the custom directive is produced. Using the command line we create the directive. The directive creation command using the command line is as follows –

ng g directive nameofthedirective 
e.g 
ng g directive changeText

It appears in the command line as given in the below code −

C:\projectA7\angular7-app>ng g directive changeText 
CREATE src/app/change-text.directive.spec.ts (241 bytes) 
CREATE src/app/change-text.directive.ts (149 bytes) 
UPDATE src/app/app.module.ts (565 bytes)

The files above are generated, i.e., change-text.directive.spec.ts and change-text.directive.ts, and the app.module.ts file is modified.

import { BrowserModule } from'@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { NewCmpComponent } from'./new-cmp/new-cmp.component'; 
import { ChangeTextDirective } from './change-text.directive';

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

The class ChangeTextDirective is included in the declarations in the file above. The class also gets imported from the file below –

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

@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

The file above has a command, and has a selector property as well. Whatever we identify in the selector, in the view, where we allocate the custom directive, the same has to correspond.

Let us add the directive in the app.component.html view as follows –

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>
<div style = "text-align:center"> 
   <span changeText >Welcome to {{title}}.</span> 
</div>

We will write the changes in change-text.directive.ts file as follows −

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed by changeText Directive.";
   }
}

There is a class named ChangeTextDirective and a constructor in the file above, which takes the compulsory element of form ElementRef. The item has all the specifics that are added to the Change Text directive.

We've added the element Console.log. The same output can be seen in the console browser. Also changes the text of the item as shown above.