Working with Angular Condition With UI Example

 Working with Angular Condition with UI Example

Angular can handle conditions in UI using typescript that is using selection statements such as if else, switch and case.

Conditions can be handle by using angular directive such as "ngIf"

ngIf uses a boolean value to add or remove any DOM element dynamically.

Syntax

<div *ngIf =true/false > </div>

Example 

Add a new component 

ng g c angularconditionsui

.ts file changes

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

@Component({

  selector: 'app-angularconditionsui',

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

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

})

export class AngularconditionsuiComponent {

public products={

  Name: 'Samsung TV',

  Price:4500.64,

  Mfd:new Date('2023/09/09'),

  Photo: 'assets/Samsung.jpg'

};

public isVisible=false;

public ShowHidePreview()

{

  this.isVisible=this.isVisible? false:true;

}

}

ScreenShot

.html Changes

<dl>

    <dt>Name</dt>

    <dd> {{products.Name}}</dd>

    <dl> Price</dl>

    <dd> {{products.Price }}</dd>

    <dl> Manufacture</dl>

    <dd> {{products.Mfd.toLocaleDateString() }}</dd>

    <dl> <button (click) ="ShowHidePreview()"> {{isVisible ? 'Hide': 'Show' }}</button></dl>

    <dd *ngIf="isVisible">

        <img [src]="products.Photo" width="250" height="250"> </dd>

</dl>

ScreenShot

AppModule.ts

Index.html

Output

Note: Angular will not allow multiple directive in single elements.

You have to use the logical container like

<ng-component>

<ng-container>

<ng-template>