如何在 html 和 angular 的多个条件下使用 ngIf

Question

I have to select drop in every click change the content how to use *ngIf in Multiple conditions in html and angular "

Already i have to tried but not working

//Html

<div>

{{service}}

<div *ngIf ="service === 'Consult'">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make
    a type specimen book.</p>
</div>

<div *ngIf= "service === 'Data' ">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the 1500, when an unknown printer took a galley of type and scrambled</p>
</div>

<div *ngIf="Digital">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry.  has been the industry's
    standard dummy text ever since the 1500,</p>
</div>

<div *ngIf="Security">
  <p>Loren gypsum is simply dummy text of the printing and typesetting industry.has been the industry's standard dummy text ever since the 1500, when an unknown printer took a galley of</p>
</div>

<div *ngIf="Cloud">
  <p>Loren gypsum is simply dummy text of the printing and typesetting industry.has been the industry's
  </p>
</div>

//Ts

services = ['Consult', 'Data', 'Digital', ' Security', 'Cloud']



}

Answer 1

Hi suresh,so for every change in drop down(select box) you need to change the content right?

Answer 2

try this:

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select (selectionChange)="onSelectionChange($event)">
    <mat-option *ngFor="let item of services " [value]="item">
      {{item}}
    </mat-option>
  </mat-select>
</mat-form-field>

ts File:

onSelectionChange(event) {
 this.service = event;
}

in the template:

<div *ngIf ="service === 'Consult'">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the when an unknown printer took a galley of type and scrambled it to make
    a type specimen book.</p>
</div>

<div *ngIf= "service === 'Data' ">
  <p>Loren Gypsum is simply dummy text of the printing and typesetting industry. has been the industry's
    standard dummy text ever since the 1500, when an unknown printer took a galley of type and scrambled</p>
</div>

Answer 3

you can use two way binding(ngModel) in select like this

<mat-select [(ngModel)]="SelectValue" (ngModelChange)="hello()">
    <mat-option *ngFor="let item of array" [value]="item.value" >
       {{item.viewValue}}
    </mat-option>
</mat-select>

your ts file

SelectValue;
  array = [
    {value: '0', viewValue: 'DivisionOne'},
    {value: '1', viewValue: 'DivisionTwo'},
    {value: '2', viewValue: 'DivisionThree'}
  ];

and list

<div *ngIf="SelectValue === '0'">
  hello this division one
</div>
<div *ngIf="SelectValue === '1'">
  hello this division Two
</div>
  <div *ngIf="SelectValue === '2'">
  hello this division Three
<div>

here is a stackblitz for you

Answer 4

Here is the solution to your problem.

app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; services = ['Consult', 'Data', 'Digital', 'Security', 'Cloud']; selectedService: any = ''; }

User ngModel to bind selectedService variable to the view.

app.component.html

 <hello name="{{ name }}"></hello> <p> Start editing to see some magic happen:) </p> <h2>Select Service</h2> <select [(ngModel)]="selectedService"> <option value="">Select</option> <option *ngFor="let service of services" [value]="service">{{service}}</option> </select> {{selectedService}} <div *ngIf = "selectedService === 'Consult' "> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p> </div> <div *ngIf = "selectedService === 'Cloud'"> <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, </p> </div> <div *ngIf = "selectedService === 'Data'"> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p> </div> <div *ngIf = "selectedService === 'Digital'"> <p>Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p> </div> <div *ngIf = "selectedService === 'Security'"> <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.</p> </div>