Angular 2 Directives

Angular 2 Directives
Techiio-author
Written by Sagar RabidasJanuary 13, 2022
9 min read
Angular
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Techiio-author
Sagar Rabidas

Software Developer

In this blog, we will discuss Angular 2 Directives

Angular 2 Directives:-

Angular 2 is much simpler than its previous version. The directive is one of the major points which is now easier to create and maintain. In the angular previous version, they are very difficult to create and maintain so many people avoid them using. But angular2 makes it easy and more readable. In angular 2 directives provide more features and are more flexible as compared to Angular 1.x > in Agular 2 directives provides simplicity and make code maintainable and readable for the developer. Also, the code is independent.

Types of Directives in Angular 2

In Angular 2 we have three types of the directive which are described below:

Let’s discuss them one by one:

  • Attribute Directive:-

It modifies the behavior or appearance of the HTML element. Some of the built-in directives available are ngClass, style. This directive modifies the DOM element. Below is an example to show the syntax and working.

Code:

import { app.component.ts
Component,Input,Output,EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent {
name:String = 'This is directive demo to modify the behaior and apperence of element.';
ChangeValue(data:String){
this.name=data;
}
technology=[
{techName:"JAVA", experienceLevel:"3 Years"},
{techName:"Spring Boot", experienceLevel:"2 Years"},
{techName:"Microservices", experienceLevel:"2 Months"}
];
}
app.component.html
<div [ngStyle]="{'width':'450px', 'margin-left':'150px','border':'4px solid #7142f4'}">
<h3 [ngStyle]="{'color':'#42f46e','font-size':'26px'}">
{{name}}
</h3>
<h3>I am working on these technologies</h3>
<table [ngClass]="'table'">
<tr><th>Technology</th><th>Experiences</th></tr>
<tr *ngFor="let data of technology">
<th>{{data.techName}}</th><th>{{data.experienceLevel}}</th>
</tr>
</table>
</div>
app.component.css
.customStyle{
color: blue;
font-size: 24px;
width:300px;
height: 30px;
margin-top: 50px
}
.table{
font-size: 24px;
font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
color:white;
margin-left: 100px
}
.table tr:nth-child(even) {
background-color: #87b793;
}
.table tr:nth-child(odd) {
background-color: #a187b7;
}
  • Structural Directive:-

This Directive is used to change the structure of the element. It alters the DOM element, by using this we can add, delete and replace the element with a new element. It modifies the DOM layout.

Structural Directive includes ngIf, ngFor, and switch to change the layout of the DOM element.

Code:

app.component.ts
import { Component,Input,Output,EventEmitter } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent {
name:String = 'This is directive example';
count:number=10;
show:boolean=true;
toggle(){
this.show=!this.show;
}
ChangeValue(data:String){
this.name=data;
}
technology=[
{techName:"JAVA", experienceLevel:"3 Years"},
{techName:"Spring Boot", experienceLevel:"2 Years"},
{techName:"Microservices", experienceLevel:"2 Months"}
] }
app.component.html
<div [ngStyle]="{'width':'450px', 'margin-left':'150px','border':'4px solid #7142f4'}">
<h3 [ngStyle]="{'color':'#42f46e','font-size':'26px'}">
{{techName}}
</h3>
<h3>I am working on these technologies</h3>
<table [ngClass]="'table'">
<tr><th>Technology</th><th>Experiences</th></tr>
<!--       ngFor Exampl e       -->
<tr *ngFor="let data of technology">
<th>{{data.techName}}</th><th>{{data.experienceLevel}}</th>
</tr>
</table>
<input type="button" (click)="toggle()" value="Toggle Div"/>
<br/>
<!--       ngIf Example        -->
<div *ngIf="show">
<div >This will show usage of ngIf</div>
</div>
<br/>
<input type="text" name="data"  [(ngModel)]="count"/>
<br/>
<!--       ngSwitch Example        -->
<div [ngSwitch]="count">
<p *ngSwitchCase="10">Your Value is 10 </p>
<p *ngSwitchCase="100">Your Value is 100 </p>
<p *ngSwitchDefault>Your Value is Not 10 or 100 </p>
</div>
</div>
app.component.css
table {
width: 100%;
}
example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}
.example-card{
width: 50%;
}
  • Component Directive:-

We cannot create an angular2 application without components. Now we can have a closer look at how this component work and what type of metadata it contains.

we have to follow some steps to create a component in angular 2. Which are as follows:

  1. Create a class annotation with @Component annotation. In this, we set various metadata properties so that this class can be identified as angular 2 components.
  2. Export this class. This will contain the business logic and server calls to get data. It will also contain angular 2 in the build method which will automatically get invoked during the life cycle of the angular component.
  3. We may require the different libraries and other components, to use them we need to import them by specifying their path.

Example to call component and render a template.

Code:

app.component.ts
import { Component, Inject, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'] })
export class AppComponent {
btnClick() {
alert('You clicked me!');
}
}
app.component.html
<h3>Example to render component.</h3><button (click)="btnClick()">Press me.</button
app.component.css
table {
width: 100%;
}
example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 100%;
}
.example-card{
width: 50%;
}

Properties of Component Directive

@Component annotation contains many metadata properties inside it lets discuss them one by one:

  1. selector: It is the name of the component. It should be unique throughout the application, two angular components cannot have the same name as the selector. Because we use this selector to render our view to the user. then our HTML methods and functions invoke our business logic on events.
  2. templateUrl: This templateUrl is nothing but the HTML page. Here we need to provide the correct path of our HTML page otherwise it will give as an error. We can only have one HTML page at one time.
  3. styleUrls: This styleUrls are the array of CSS. In which we can have any number of CSS inside it. But again here the path has been correct.
  4. Providers: These providers are optional, basically it depends upon the business requirement whether we want to call any service in the current component or not. This is the injectable class in angular 2.
Angular
AngularJs
Angular2
Angular 2 Directives
0 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 0 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance