Learn Directive Types with Code
app.component.html
<ul>
<li>
<a routerLink=""> Home</a>
</li>
<li>
<a [routerLink]="">About</a>
</li>
<li >
<a [routerLink]="">Contact</a>
</li>
<li>
<a [routerLink]="">Life Management</a>
</li>
<li>
<a [routerLink]="">AIR News</a>
</li>
<li>
<a [routerLink]="">Essay Writing</a>
</li>
<li >
<a>
<input type="text" placeholder="Search..">
</a>
</li>
</ul>
<h1 class="text-center" > Directive</h1>
<p style="margin: 2px;">
There are two types of directives in angular
</p>
<div class="row">
<div class="col-md-6" [ngClass]="{'warning' : true}">
<pre [ngClass]="{'success' : true}">
1. Built-in Directive
2. Custom Direcitves ( ng generate directive emoji_dir_name)
</pre>
<div [ngClass]="{'error': info.priority > 10}">{{info.text}}</div>
<h1>Build-in Directive</h1>
<p> There are 3 types of directives in angular which is know as built-in directives</p>
<pre>
1. component -- Directives with template
2. Attribute --- [ngStyle] and [ngClass]
3. Structure --- *ngIf and *ngFor
</pre>
</div>
<div class="col-md-6" [ngClass]="{'warning' : true}">
<h1 [ngClass]="{'error' : true}">component Directives</h1>
<p>component directives are the directive with template.</p>
<h1 [ngStyle]="{'background' : isBlue ? 'blue' :'red'}">Attribute Directive</h1>
<p>Attribute directive are the responsible for manipulating the appearance and behaviour of DOM.</p>
<pre>
a. [ngStyle]
b. [ngClass]
</pre>
</div>
</div>
<div class="row">
<div class="col-md-6 text-center">
<h1 *ngIf="show" >Structural Directives</h1>
<input type="submit" value="*ngFor iterate country name from list">
<input type="submit"value="Click *ngIf Effect" (click)="activeStructureDirectiveNgIf()">
<p> Structural Directives are responsible for changing DOM</p>
</div>
<div class="col-md-6">
<h1 appHeighlight> Custom directive!, Country :</h1>
<select >
<option [value]="country" *ngFor="let country of countries">{{country}}</option>
</select>
</div>
</div>
app.component.ts
import { Component,OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'hello';
isBlue:boolean = true;
show:boolean = true;
info:any = { priority:11,
text : 'How to add classes dynamically based upon certain condition'
}
countries = ['INDIA','USA','CANADA','UK','US']
value = ['value','USA','CANADA','UK','Value']
ngOnInit(){
this.countries.push('xyz')
this.countries.pop()
this.countries.pop()
let hello = this.countries.toString()
}
activeStructureDirectiveNgIf(){
if(this.show == true){
this.show = false;
}else{
this.show = true
}
}
}
app-heighlight.directive.ts
// we are going to highlight the selected DOM element by setting an element’s background color. by using custom directive
import { Directive, ElementRef } from '@angular/core';
//first we are importing Directive and ElementRef from Angular core.
// Directive provides the functionality of @Directive decorator
// in which we provide its property selector to appHeighLight so that we can use this selector anywhere in the application.
// We are also importing the ElementRef which is responsible for accessing the DOM element.
//Now to get appHeighlight Directive to work, we need to add our Directive to the declarations array in the app.module.ts file.
@Directive({
selector: '[appHeighlight]'
})
export class HeighlightDirective {
constructor(private eleRef: ElementRef) {
eleRef.nativeElement.style.background = 'cyan';
}
}
app.module.ts
import { HeighlightDirective } from './app-heighlight.directive';
declarations: [
AppComponent,
HeighlightDirective,
],
app.component.css
.warning {
background: hsl(48, 100%, 67%);
border: 5px solid hsl(48, 100%, 67%);
color: black;
}
.error {
background: hsl(348, 100%, 61%);
border: 5px solid hsl(348, 100%, 61%);
color: white;
}
.success {
background: hsl(141, 71%, 48%);
border: 5px solid hsl(141, 71%, 48%);
color: white;
}
.message{
color:green;
}
ul {
display: inline-flex;
width: auto;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
ul li{
list-style-type: none;
}
ul li a {
text-decoration: none;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
font-size: 17px;
}
ul li a:hover{
background: #ddd;
color: black;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
Directives are the instructions in the DOM, they are specify how to place your components and business logic in the angular. They are denoted as @directive
Component directives are used in main class. They contain the details of how the component should be processed, instantiated and used at run time.
Structure directives start with * sign. These directives are used to manipulate and change the structure of the DOM element. e.g. -- *ngIf and *ngFor
Structure directive will affect the whole area in the DOM , start with * symbol and look differnet.
Attribute directives are used to change the look and behaviour of DOM elements.
eg. ngClass, ngStyle, etc
attribute directive will affect only the element they are added to. They are look like a normal HTTP attribute and mainly used in data binding and event binding.
Comments
Post a Comment