Home  >  Forum  >  Angular
Post New Query

How to list options in drop down based on some condition in Angular mat-options?



Asked on August 27, 2018
Hello,

I have an array of applications. Here I need to list the application names in drop down. But some application names are null. So in drop down I am getting those applications also, as it does not have names just displaying blank option.
Is there any way to avoid those application names listing as option in drop down ?

My code is as follows:

app.component.html

<span style="font-size: 15px">
Apps </span>
<mat-select [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" style="width:1%">
<mat-option *ngFor="let app of apps" [value]="app.id">
{{app.name}}
</mat-option>
</mat-select>

app.component.ts



getApps(loggedInUser) {
this.processAdminServices.getApps(loggedInUser)
   .subscribe(
data =>{
let appsData = data["data"];
this.apps = appsData;
console.log("APPS LIST ARE AS FOLLOWS:");
console.dir(this.apps);
},
errorCode => {this.statusCode = errorCode}
);

}

App array:
    1. Array(9)
      1. length:9
  1. Here I don't want list the applications as option in drop down which are having name as null.
  2. How to achieve this? Please provide solution for achieving this.

  3. Thanks & Regards,
  4. Shilpa Kulkarni




Replied on August 27, 2018
Using  filter I am able to achieve this functionality. I filtered the array as follows:
let appsData: any[] = data["data"];
this.apps = appsData.filter(app => { 
  if(app.id != null) { 
    return app;
  } 
});


Write Answer








©2019 concretepage.com | Privacy Policy | Contact Us