Going through directives in Angular

Let’s take a tour of Angular directives. Since it is one of the most important functionality of Angular, we should surely dive in to understand it in a better way. We will also make our own directives which will instruct the DOM element to show some behavior on which it is being attached.
Here we Go…
Basically, we got 3 types of directives in Angular. They are
1. Component directives(a directive with template)
2. Attribute Directives (Only change in DOM Properties)
3. Structural Directives (Changes/Modifies DOM structure)
Okay, that’s it.
Now the very first one, Component Directives. I think we already know about it and have been using for long time. You will get some idea by looking on the below codes.
import { Component } from '@angular/core';
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
export class AppComponent  {
name = 'Angular';
This is a directive which carries some metadata, will decide how our component is going to look on the web-page. There is an object which is being passed in the @Component decorator which contains some key value pair of data. We also have a class which would provide functionality to this directive.
So, we have view and functionality encapsulated together, rendering as a component on web-page.
If we want to break our application in to smaller parts, component can be preferred for that. Also, one thing we need to keep in mind is that, we could place one component per DOM element.
Attributes Directives
Attributes directives just sit on the elements like an attributes and they can change the appearance of DOM elements. They do not change the structure of element. They only change the properties of elements. For example, background color, font size etc.
We already have two built in attribute directive provided by Angular.
ngStyle and ngClass
Both the directives are bound with some data in the form of key value pairs.
for instance, ngStyle
<h2> [ngStyle]="{'background-color': 'green'}"> I am Green </h2>
we can also write properties as a camel case but without any space or hyphen .
<h2> [ngStyle]="{backgroundColor: 'green'}"> I am Green </h2>
we can also apply multiple css properties on the same element like this.
bold: string = 'bold';
<h2> [ngStyle]="{'font-weight': bold}"> I am bold font </h2>
Or sometimes, we can define multiple css properties within in a single object and can bind it to the ngStyle along with expression
highlight = {
  fontWeight: 'bold',
  backgroundColor: 'green',
  fontFamilty: 'Arial'
fadeOut = {
display: none
<h2> [ngStyle]="2/2 == 0 ? highlight : fadeOut"> I am bold font </h2>
Same with ngClass=”className” (or) [ngClass] = {key: value}
classA {}
classB {}
classC {}
<h2> ngClass="classA, classB, classC"> Multiple Classes </h2>
we can also bind with expression like we did in ngStyle. When true is assgined to the class, the class will be active on the marked element. In the case of false, it will not be active.
<h2>  [ngClass]="{classA: true}">Some Text </h2>
<h2>  [ngClass]="{classA: 2/2 == 0? true : false}">Some Text </h2>
Structural Directives
Structural Directive change the structure of DOM around the element on which it is been placed.
<h2> Parent Element </h2>
<h3> *ngIf="2/2 == 0"> Change in structure </h3>
<h4> H4 Element </h4>
Changing DOM using Structural Directive
In the above animation, we could clearly observe that there is a change in the structure of view container elements. Since *ngIf is equals to true, h3 tag element has been removed from DOM and this is why we call it structural directives.
same concept will also apply with the Angular in-built structural directives like *ngFor and *ngSwitch
<div [ngSwitch]="value" >
<p *ngSwitchCase = "5"> value is 5 </p>
<p *ngSwitchCase = "10"> value is 10</p>
<p *ngSwitchDefualt>  value is default</p>
Thanks for reading this article. Pleas click on the below link to continue this article

People Reaction : 0

Rohit Sharma
Name : Email : Website :
© 2022 WriteSomeCode. All Right Reserved. A Rohit Sharma Blog. Creative Commons License licensed under a Creative Commons Attribution 4.0 International License