Directives In Angular And Their Functions Using Node.js & VS Code

Introduction

Directives are the elements that change the appearance or behavior of the DOM element. Directives are used to change the view of your original data. Their three types of directives.

Component directive
Structure directive
Attribute directives

Component directory

A component directive is required to add a dom element in the component. Without a component directive, you can't create an Angular application. The component directive name has like component.ts (where ts stand for typescript).

Component directive example

component.ts

<h1>{{ title }}</h1>
<h2>This is a Component Directive Example</h2>

<button (click)="saveme()">Click me</button>

component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-directive',
  templateUrl: './directive.component.html',
  styleUrls: ['./directive.component.css']
})
export class DirectiveComponent {
   title = " Directive with Chaman Gautam ";
  saveme() {
    alert("hello this is component directive press ok for view data");
    console.log("Hello I am Chaman Gautam now I am told you about component directive");
  }
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DirectiveComponent } from './directive/directive.component';
@NgModule({
  declarations: [
    AppComponent,
    DirectiveComponent
  ],
  imports: [
    BrowserModule  
  ],
  providers: [astservice],
  bootstrap: [DirectiveComponent]
})
export class AppModule { }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

index.ts

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Augs</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-directive></app-directive>
</body>
</html>

Now compile this application using the command " ng serve " After successfully compiling, you have to open the web browser and run this application by hitting on the browser "localhost:4200" After some time, you can see your output will be displayed on your computer screen.

Output

Click me

Now you can see the output there is no data in the console. Now press the OK button.

After pressing the click me to button the output will be shown like this.

OK button

Now you can see that there is an alert, then press the OK button to view the data. After pressing the OK button, the output will be shown like this.

Output

View the data

Structural directives

Structural directives are responsible for the HTML layout. The structural directive is to change the view of your original data, which data you have declared in the HTML component. The structural directive also works to print data according to the user's requirement. The structural directive is the condition-based directive, these are works with the conditions. These directives are performed in your works with conditions like if condition, for loop, switch statements, and ng if-else condition.

There are basically 3 structural directives available in Angular.

NG if(*NGIf)
NG for(*NGFor)
NG Switch(*NGSwitch).

When the condition is a true example.

structuredirectory.html

<h2>Structure directive</h2>
<p *ngIf="checkngif">
    <h2>hello this is NgIf Directive when your statement true then i show when your statement is false</h2>
</p>

structuredirective.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-directive',
  templateUrl: './directive.component.html',
  styleUrls: ['./directive.component.css']
})
export class DirectiveComponent {
  checkngif = true;
}

Now, compile this application using the command " ng serve", and compile successfully. Open the web browser and run this project using " localhost:4200" After a few seconds, you can see the output on your computer screen.

Output

Structure Directive

Now, you can see this example showing the data when the condition is true.

Now, when the condition is false.

structure.html

<h2>Structure directive</h2>
<p *ngIf="checkngif">
    <h2>hello this is NgIf Directive when your statement true then i show when your statement is false</h2>
</p>

structure.ts

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

@Component({
  selector: 'app-directive',
  templateUrl: './directive.component.html',
  styleUrls: ['./directive.component.css']
})
export class DirectiveComponent {
  checkngif = false;
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DirectiveComponent } from './directive/directive.component';

@NgModule({
  declarations: [
    AppComponent,
    DirectiveComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [astservice],
  bootstrap: [DirectiveComponent]
})
export class AppModule { }

main.ts

import { enableProdMode } from '@angular/core';    
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';    
    
import { AppModule } from './app/app.module';    
import { environment } from './environments/environment';    
    
if (environment.production) {    
  enableProdMode();    
}    
    
platformBrowserDynamic().bootstrapModule(AppModule)    
  .catch(err => console.error(err));

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Augs</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-directive></app-directive>
</body>
</html>

now compile this project using the command " ng serve" after compile successfully. open your web browser and run this project by using "localhost:4200". after some time you can see the output on your computer monitor screen. like

Output

Output

Now, you can see that there is no data in the console. When the condition is false, the data will be hidden.

Attribute directive

The attribute directory is the directory that is working on the HTML text. The attribute directory changes the font style, color, and behavior of the HTML text without using internal and external CSS. The attribute directive provides the built-in directives Ng Style, Ng class.

Ng Style

Angular provides a built-in style attribute to modify the simple HTML text.

Ng Class

This attribute is used to change the class attribute of the elements in dom or the component to which it has been attached.

attribute.html

<h1>{{title}}</h1>

<h2>Attribute Directive</h2>

<p>
    <h2>normal text :- Attribute directive by chaman gautam</h2> <br>
    <h2> after use ngstyle directive</h2>
    <h2> <p [ngStyle]="{'color':'red', 'font-weight':'bold'}">Attribute directive by chaman gautam</p>
    </h2>
</p>

attribute.ts

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

@Component({
  selector: 'app-directive',
  templateUrl: './directive.component.html',
  styleUrls: ['./directive.component.css']
})
export class DirectiveComponent {
}

module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DirectiveComponent } from './directive/directive.component';
@NgModule({
  declarations: [
    AppComponent,
    DirectiveComponent
  ],
  imports: [
    BrowserModule  
  ],
  providers: [astservice],
  bootstrap: [DirectiveComponent]
})
export class AppModule { }

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Augs</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-directive></app-directive>
</body>
</html>

Now compile this project using the command " ng serve ". After compiling successfully. Open your web browser and run this project by using "localhost:4200". After some time, you can see the output on your computer monitor screen.

Output

Localhost

Now, you can see that the text color will be changed after using the Ngstyle directory. You can modify this text according to your requirements, such as font size and style.

I hope you enjoy this article. To learn more about Angular, follow me, and to learn about more technology, follow C# Corner.