Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Angular 8 ngIf Directive

ngIf Directive is the part of structural directives.The NgIf is the most straightforward structural Directive and comfortable to understand. The ngIf Directives is used to add and remove HTML elements according to the expression. The expression returns a Boolean value. If the appearance is false, then the removed, otherwise portion is inserted.

It is same as the ng-if Directive of AngularJS. The ngIf directive doesn't hide elements. It adds and removes them physically from the DOM. We can confirm it by using browser developer tools to inspect the DOM. When the condition is false, NgIf removes the host element from the DOM, which detection, and destroys it.

ngIf Syntax

Condition is true and ngIf is true.

Condition is false and ngIf is false.

The *ngIf directive form with an “else” block

Content to render when condition is true.

Content to render when condition is false.

The ngIf directive does not hide the DOM element. It removes the entire element along with its sub tree from the DOM. It also removes the state freeing up the resources attached to the element.

The *ngIf directive is most commonly used to conditionally show an inline template. See the following example:

@Component({
 selector: ‘ng-if-simple’, 
 template: 
 
 show= {[show}} 

Text to show
` }) export class NgIfSimple { show: boolean =true; }

Same template example with else block

@Component({
  selector :’ng-if-else’;
 template:
 
 show={{show}} 

Text to show
Alternate text while primary text is hidden ` }] export class NgIfElse{ show: boolean = true; }



ADVERTISEMENT
ADVERTISEMENT