npm Package @angular\/common
\nModule import { NgIf } from ‘@angular\/common’;
\nSource common\/src\/directives\/ng_if.ts<\/p>\n
Overview
\n@Directive({ selector: ‘[ngIf]’ })
\nclass NgIf {
\nset ngIf: any
\nset ngIfThen: TemplateRef<NgIfContext> | null
\nset ngIfElse: TemplateRef<NgIfContext> | null
\n}<\/p>\n
Selectors
\n[ngIf]\n
Inputs
\nngIf bound to NgIf.ngIf
\nngIfThen bound to NgIf.ngIfThen
\nngIfElse bound to NgIf.ngIfElse<\/p>\n
Description
\nConditionally includes a template based on the value of an expression.<\/p>\n
ngIf evaluates the expression and then renders the then or else template in its place when expression is truthy or falsy respectively. Typically the:<\/p>\n
then template is the inline template of ngIf unless bound to a different value.
\nelse template is blank unless it is bound.<\/p>\n
Most common usage
\nThe most common usage of the ngIf directive is to conditionally show the inline template as seen in this example:<\/p>\n
@Component({
\nselector: ‘ng-if-simple’,
\ntemplate: `
\n<button (click)=”show = !show”>{{show ? ‘hide’ : ‘show’}}<\/button>
\nshow = {{show}}
\n<br>
\n<div *ngIf=”show”>Text to show<\/div>
\n`
\n})
\nclass NgIfSimple {
\nshow: boolean = true;
\n}<\/p>\n
Showing an alternative template using else<\/p>\n
If it is necessary to display a template when the expression is falsy use the else template binding as shown. Note that the else binding points to a <ng-template> labeled #elseBlock. The template can be defined anywhere in the component view but is typically placed right after ngIf for readability.<\/p>\n
@Component({
\nselector: ‘ng-if-else’,
\ntemplate: `
\n<button (click)=”show = !show”>{{show ? ‘hide’ : ‘show’}}<\/button>
\nshow = {{show}}
\n<br>
\n<div *ngIf=”show; else elseBlock”>Text to show<\/div>
\n<ng-template #elseBlock>Alternate text while primary text is hidden<\/ng-template>
\n`
\n})
\nclass NgIfElse {
\nshow: boolean = true;
\n}<\/p>\n
Using non-inlined then template<\/p>\n
Usually the then template is the inlined template of the ngIf, but it can be changed using a binding (just like else). Because then and else are bindings, the template references can change at runtime as shown in this example.<\/p>\n
@Component({
\nselector: ‘ng-if-then-else’,
\ntemplate: `
\n<button (click)=”show = !show”>{{show ? ‘hide’ : ‘show’}}<\/button>
\n<button (click)=”switchPrimary()”>Switch Primary<\/button>
\nshow = {{show}}
\n<br>
\n<div *ngIf=”show; then thenBlock; else elseBlock”>this is ignored<\/div>
\n<ng-template #primaryBlock>Primary text to show<\/ng-template>
\n<ng-template #secondaryBlock>Secondary text to show<\/ng-template>
\n<ng-template #elseBlock>Alternate text while primary text is hidden<\/ng-template>
\n`
\n})
\nclass NgIfThenElse implements OnInit {
\nthenBlock: TemplateRef<any>|null = null;
\nshow: boolean = true;<\/p>\n
@ViewChild(‘primaryBlock’)
\nprimaryBlock: TemplateRef<any>|null = null;
\n@ViewChild(‘secondaryBlock’)
\nsecondaryBlock: TemplateRef<any>|null = null;<\/p>\n
switchPrimary() {
\nthis.thenBlock = this.thenBlock === this.primaryBlock ? this.secondaryBlock : this.primaryBlock;
\n}<\/p>\n
ngOnInit() { this.thenBlock = this.primaryBlock; }
\n}<\/p>\n
Storing conditional result in a variable<\/p>\n
A common pattern is that we need to show a set of properties from the same object. If the object is undefined, then we have to use the safe-traversal-operator ?. to guard against dereferencing a null value. This is especially the case when waiting on async data such as when using the async pipe as shown in following example:<\/p>\n
Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}!<\/p>\n
There are several inefficiencies in the above example:<\/p>\n
We create multiple subscriptions on userStream. One for each async pipe, or two in the example above.
\nWe cannot display an alternative screen while waiting for the data to arrive asynchronously.
\nWe have to use the safe-traversal-operator ?. to access properties, which is cumbersome.
\nWe have to place the async pipe in parenthesis.<\/p>\n
A better way to do this is to use ngIf and store the result of the condition in a local variable as shown in the the example below:<\/p>\n
@Component({
\nselector: ‘ng-if-let’,
\ntemplate: `
\n<button (click)=”nextUser()”>Next User<\/button>
\n<br>
\n<div *ngIf=”userObservable | async as user; else loading”>
\nHello {{user.last}}, {{user.first}}!
\n<\/div>
\n<ng-template #loading let-user>Waiting… (user is {{user|json}})<\/ng-template>
\n`
\n})
\nclass NgIfAs {
\nuserObservable = new Subject<{first: string, last: string}>();
\nfirst = [‘John’, ‘Mike’, ‘Mary’, ‘Bob’];
\nfirstIndex = 0;
\nlast = [‘Smith’, ‘Novotny’, ‘Angular’];
\nlastIndex = 0;<\/p>\n
nextUser() {
\nlet first = this.first[this.firstIndex++];
\nif (this.firstIndex >= this.first.length) this.firstIndex = 0;
\nlet last = this.last[this.lastIndex++];
\nif (this.lastIndex >= this.last.length) this.lastIndex = 0;
\nthis.userObservable.next({first, last});
\n}
\n}<\/p>\n
Notice that:<\/p>\n
We use only one async pipe and hence only one subscription gets created.
\nngIf stores the result of the userStream|async in the local variable user.
\nThe local user can then be bound repeatedly in a more efficient way.
\nNo need to use the safe-traversal-operator ?. to access properties as ngIf will only display the data if userStream returns a value.
\nWe can display an alternative template while waiting for the data.<\/p>\n
Syntax<\/p>\n
Simple form:<\/p>\n
<div *ngIf=”condition”>…<\/div>
\n<ng-template [ngIf]=”condition”><div>…<\/div><\/ng-template><\/p>\n
Form with an else block:<\/p>\n
<div *ngIf=”condition; else elseBlock”>…<\/div>
\n<ng-template #elseBlock>…<\/ng-template><\/p>\n
Form with a then and else block:<\/p>\n
<div *ngIf=”condition; then thenBlock else elseBlock”><\/div>
\n<ng-template #thenBlock>…<\/ng-template>
\n<ng-template #elseBlock>…<\/ng-template><\/p>\n
Form with storing the value locally:<\/p>\n
<div *ngIf=”condition as value; else elseBlock”>{{value}}<\/div>
\n<ng-template #elseBlock>…<\/ng-template><\/p>\n
Static Members
\nConstructor<\/p>\n
constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>)<\/p>\n
Members<\/p>\n
set ngIf: any<\/p>\n
set ngIfThen: TemplateRef<NgIfContext> | null<\/p>\n
set ngIfElse: TemplateRef<NgIfContext> | null<\/p>\n
<\/p>\n
<\/p>\n
NgSwitch directive<\/strong><\/p>\n npm Package @angular\/common Adds \/ removes DOM sub-trees when the nest match expressions matches the switch expression.<\/p>\n Overview How To Use Selectors Inputs Description In other words:<\/p>\n you define a container element (where you place the directive with a switch expression on the [ngSwitch]=”…” attribute) Elements within NgSwitch but outside of a NgSwitchCase or NgSwitchDefault directives will be preserved at the location.<\/p>\n The ngSwitchCase directive informs the parent NgSwitch of which view to display when the expression is evaluated. When no matching expression is found on a ngSwitchCase view, the ngSwitchDefault view is stamped out.<\/p>\n Members <\/p>\n IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course.<\/strong><\/p>\n
\nModule import { NgSwitch } from ‘@angular\/common’;
\nSource common\/src\/directives\/ng_switch.ts
\nNgModule CommonModule<\/p>\n
\n@Directive({ selector: ‘[ngSwitch]’ })
\nclass NgSwitch {
\nset ngSwitch: any
\n}<\/p>\n
\n<container-element [ngSwitch]=”switch_expression”>
\n<some-element *ngSwitchCase=”match_expression_1″>…<\/some-element>
\n<some-element *ngSwitchCase=”match_expression_2″>…<\/some-element>
\n<some-other-element *ngSwitchCase=”match_expression_3″>…<\/some-other-element>
\n<ng-container *ngSwitchCase=”match_expression_3″>
\n<!– use a ng-container to group multiple root nodes –>
\n<inner-element><\/inner-element>
\n<inner-other-element><\/inner-other-element>
\n<\/ng-container>
\n<some-element *ngSwitchDefault>…<\/some-element>
\n<\/container-element><\/p>\n
\n[ngSwitch]\n
\nngSwitch bound to NgSwitch.ngSwitch<\/p>\n
\nNgSwitch stamps out nested views when their match expression value matches the value of the switch expression.<\/p>\n
\nyou define inner views inside the NgSwitch and place a *ngSwitchCase attribute on the view root elements.<\/p>\n
\nset ngSwitch: any<\/p>\n
![\"\"](\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\")
<\/a><\/p>\n![\"Angular](\"http:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/05\/Back-Arrow.jpg\"){kind=icon}
Back to Angular 4 Tutorial Main Page <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"