ConcretePage.comHow 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:
- Array(9)
- 0:{id: null, defaultAppId: "kickstart", name: null, description: null, modelId: null, …}
- 1:{id: null, defaultAppId: "tasks", name: null, description: null, modelId: null, …}
- 2:{id: null, defaultAppId: "identity", name: null, description: null, modelId: null, …}
- 3:{id: null, defaultAppId: "analytics", name: null, description: null, modelId: null, …}
- 4:{id: 1, defaultAppId: null, name: "Observation Module 15_03_2018 App", description: "", modelId: 8, …}
- 5:{id: 2002, defaultAppId: null, name: "location tree view drop down app", description: "", modelId: 2004, …}
- 6:{id: 5005, defaultAppId: null, name: "HSE Observation Complete Latest 10_07_2018 for Sir", description: "", modelId: 6010, …}
- 7:{id: 15015, defaultAppId: null, name: "Incident Module", description: "", modelId: 18026, …}
- 8:{id: 18018, defaultAppId: null, name: "Observation Module", description: "", modelId: 22025, …}
- length:9
- Here I don't want list the applications as option in drop down which are having name as null.
- How to achieve this? Please provide solution for achieving this.
- Thanks & Regards,
- 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;
}
});
