Directives In Angular

  §  Directives help us is to enable us to give instructions to the Angular on how to render the templates to the DOM. So, they use directives to give instructions to Angular as it is rendering the templates on the screen.

    §  Angular templates are dynamic. When Angular renders them, it transforms the DOM according to the instructions given by directives. A directive is a class with a @Directive() decorator.

    §  There are two other kinds of directives in Angular, structural and attribute directives.

Structural Directives

§  structural directives are, they help us to alter the layout of our content by helping us to add and remove elements from the DOM.

§  So, using structural directives you add or remove HTML elements from the Dom.
§  There are three common built in structural directives namely
·        ngIf
·        ngSwitch

·        ngFor

ngIf

  §  Structural directives ngIf and ngSwitch which are used to conditionally render HTML elements

     §  Since ngIf is a structural directive it is prefixed with *.

    §  When you use ngIf in your template syntax you will write it as *ngIf

<div *ngIf="selectedItem">..</div>

§  For example, if you apply the *ngIf directive to a div like this in this example, what you're specifying where is that if the selectedItem is not null then this div will be added to the DOM. If that selectedItem is null, then this div, whatever is contained in this div will not be added to the DOM, so you are literally removing this from the DOM if the value turns out to be false. If it turns out to be true, then it is added into the DOM.

In our example we have <div> tag

open app.component.html file.

now we want to use ng-if directive on this div tag . so with-in opening tag use asterisk and then ngIf then we need to assign a true or false value .

let's begin with a straight forward value true this and take a look at the browser we can see gravity4Tech.blogspot.com

app.component.html

<mat-toolbar color="primary">

<div class="container" *ngIf="true">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

Here we are using angular material toolbar.

When we are working with angular material toolbar we need to import MatToolbarModule in app.module.ts file.

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

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

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({

declarations: [

AppComponent,

],

imports: [

BrowserModule,

BrowserAnimationsModule,

MatToolbarModule,

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Note:-

§  If angular material library is not added in your project then first add angular material library in your project by following commands.

ng add @angular/material

app.component.html

<mat-toolbar color="primary">

<div class="container" *ngIf="true">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

§  Save the project and run the project by the following command in terminal.

ng serve -o

Output

 

  §  let's back in our code I change true to false save this and take a look at the browser gravity4Tech.blogspot.com is not visible anymore.

<mat-toolbar color="primary">

<div class="container" *ngIf="false">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

§  Save the project and run the project by the following command in terminal.

ng serve -o

Output

  §  Setting true or false on the right-hand side is of not much let's assign a property  value now we create a new property call isDisplay name and set it true and assign it to the directive.

     app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

isDisplay=true;

}

app.component.html

<mat-toolbar color="primary">

<div class="container" *ngIf="isDisplay">

<h1>gravity4Tech.blogspot.com</h1>

</div>

</mat-toolbar>

§  Save the project and check the output

*ngIf and Else: if statement with else

  §  When we are working with *ngIf directive can provide an expression which return boolean flag true of false to add or remove the element form DOM having *ngIf directive.if *nfIf directives returns false then we want to perfrom another task then you can use else also with *ngIf.

    §  *ngIf have the else statement with if to handle conditions

<ng-template>
§  The <ng-template> is an Angular element for rendering HTML.

§   It is never displayed directly. In fact, before rendering the view, Angular replaces the <ng-template> and its contents.

§  now save this and take a look at the browser you can see gravity4Tech.blogspot.com and if I change isDisplay to false gravity4Tech.blogspot.com is not displayed.

§  By making use of a property we can add or remove the element in the DOM by toggling property value between true and false.

Syntax:

<ng-container *ngIf="condition; else elseBlock">

Content to render when condition is true.

</ng-container>

<ng-template #elseBlock>

Content to render when condition is false.

</ng-template>

  §  let's take a look an example to see how to implement and else block for the ngIf directive.

<mat-toolbar color="primary">

<div class="container" *ngIf="isDisplay; else elseBlock">

<h1>gravity4Tech.blogspot.com</h1>

</div>

<ng-template #elseBlock>

<h1>Websited is Hidden</h1>

</ng-template>

</mat-toolbar>

 let's take a look at another Syntax that angular provide for the ng-if directive.

  §  In Angular 4.x.x You can use ngIf in four way to achieve simple if else procedure:

Just Use If

<div *ngIf="isValid">

If isValid is true

</div>

Using If with Else (Please notice to templateName)

<div *ngIf="isValid; else templateName">

If isValid is true

</div>

<ng-template #templateName>

If isValid is false

</ng-template>

Using If with Then (Please notice to templateName)

<div *ngIf="isValid; then templateName">

Here is never showing

</div>

<ng-template #templateName>

If isValid is true

</ng-template>

Using If with Then and Else

<div *ngIf="isValid; then thenTemplateName else elseTemplateName">

Here is never showing

</div>

<ng-template #thenTemplateName>

If isValid is true

</ng-template>

<ng-template #elseTemplateName>

If isValid is false

</ng-template>

Note:-

§  ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent {

isDone = true;

}

1) *ngIf

<div *ngIf="isDone">

It's Done!

</div>

<!-- Negation operator-->

<div *ngIf="!isDone">

It's Not Done!

</div>

2) *ngIf and Else

<ng-container *ngIf="isDone; else elseNotDone">

It's Done!

</ng-container>

<ng-template #elseNotDone>

It's Not Done!

</ng-template>

3) *ngIf, Then and Else

<ng-container *ngIf="isDone; then iAmDone; else iAmNotDone">

</ng-container>

<ng-template #iAmDone>

It's Done!

</ng-template>

<ng-template #iAmNotDone>

It's Not Done!

</ng-template>

  §  You can Use <ng-container> and <ng-template> for Achieve This

<ng-container *ngIf="isValid; then template1 else template2"></ng-container>

<ng-template #template1>

<div>Template 1 contains</div>

</ng-template>

<ng-template #template2>

<div>Template 2 contains </div>

</ng-template>

Just add new updates from Angular 8.

1.     For case if with else, we can use ngIf and ngIfElse.

<ng-template [ngIf]="condition" [ngIfElse]="elseBlock">

Content to render when condition is true.

</ng-template>

<ng-template #elseBlock>

Content to render when condition is false.

</ng-template>

2.     For case if with then, we can use ngIf and ngIfThen.

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock">

This content is never showing

</ng-template>

<ng-template #thenBlock>

Content to render when condition is true.

</ng-template>

3.     For case if with then and else, we can use ngIf, ngIfThen, and ngIfElse.

<ng-template [ngIf]="condition" [ngIfThen]="thenBlock" [ngIfElse]="elseBlock">

This content is never showing

</ng-template>

<ng-template #thenBlock>

Content to render when condition is true.

</ng-template>

<ng-template #elseBlock>

Content to render when condition is false.

</ng-template>

Read more

Property Binding In Angular

Property Binding In Angular

  §  Before Learning about property binding in angular.it is very important that you understand the difference between an HTML attribute and DOM property. 

§  Consider an input element value of an input element is equal to gravity4Tech. in the browser we have the input element filled with the string 'gravity4Tech'. 

<input type="text" value="gravity4Tech" id="txt"/>

§  If I inspect this element and then in the console type txt.getAttribute('value') represents the textbox element whose id is ‘txt’ which is the input element. txt.getAttribute('value') we can see gravity4Tech.similarly if  we type txt.value we can see again gravity4Tech.

 

  §  If I change the text to GET SET TECH in the input element and then repeat the same command you can see that getAttribute still returns gravity4Tech but the value property now returns GET SET TECH.the attribute did not change. but value property did change.

§  So, in our example the HTML attribute value specified the initial value the DOM property value is the current value so the value attribute remain the same whereas the value property change no why did I explain this explain that because in the code at first glance property binding is going to seem like your binding to the HTML attribute why we are actually binding to the DOM property to avoid that confusion I have to give an example about attributes versus properties with property Binding in angular actually binding to the property of the Dom element.

So it is important to keep in mind that,

§  HTML attributes and the DOM properties are different things.

§  Attributes are defined by HTML and properties are defined by the document object model.

§  Attributes initialized DOM properties and then they are done. attribute values cannot change once they are initialized.

§  Angular binding works with properties and events, and not attributes.

§  The role of attributes is to initialize element properties and their job is done.

§  Why do we need property binding well there is a limitation to interpellation it can only work with string values and there are html properties that are Boolean properties that we may need to sometime bind to?

§  So, let's an example consider the disable attribute of an input element by default it is always set to false so input is always enabling. so, let's add the disabled attribute now if you take a look at the browser, we can see the input element is disabled.

<input type="text" value="gravity4Tech" id="txt" disabled/>

  §  Let’s back in a code now let's try to set this disabled attribute to false so false and if it takes a look at the browser again you can see that the input is still disabled this is a problem with Boolean attribute such as disable.

<input type="text" value="gravity4Tech" id="txt" disabled="false"/>

§  When you add the disabled attribute, it presents alone initializes the input disabled to true the input is disabled setting the value to false has no effect and because it is a Boolean attribute that need true or false interpellation doesn't work.

§  So, interpellation doesn’t work for Boolean attribute. so if I even set to this false within curly braces at back to the browser the input still disabled.

<input type="text" value="gravity4Tech" id="txt" disabled="{{false}}"/>

§  So the solution here is to use property binding so instead of using the double curly braces which does not work will going to enclose disabled within square bracket and then assign it is true or false so now that we have set to false it means the input is not disable and if we go back to the browser you can see  the input element are enabled I can type anything I want to.

<input type="text" value="gravity4Tech" id="txt" [disabled]="true"/>

  §  Now we keep to set disabled to true then you can see the input element is now disabled.

<input type="text" value="gravity4Tech" id="txt" [disabled]="true"/>

§  of course, hardcoding true or false is not of much use. so, let's create a property in the class and then bind it.

§  so now we add a new property w call this public isDisabled and set it true.

§  Now instead of Binding it to a true or false value we binded it to the isDisabled property right now isDisabled is set to true in the browser the input element is still disabled go back to the code set isdisabled to false and go back in the browser the input element is not disabled anymore.

app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

public isDisable=true;

}

app.component.html

<input type="text" value="gravity4Tech" id="txt" [disabled]="isDisable"/>

v Some important points to keep in mind when using Property binding.

§  Remember to enclose the property name with a pair of square brackets. If you omit the brackets, Angular treats the string as a constant and initializes the target property with that string.

§  With Property binding we enclose the element property name in square brackets.

Syntax-

[html-element-property-name] ="component property-name"

<input type="text" value="gravity4Tech" id="txt" [disabled]="isDisable"/>

v   When working with the style attribute, the binding method switches up a bit, you bind directly to the style property involved. If you wanted to update the color of an element, the following syntax would be used:

app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

color = 'seagreen';

}

app.component.html

<h1 [style.color]='color'>Welcome to gravity4Tech</h1>

Read more