using if condition in drop down in angular

Question

I'm trying to add a filter to a dropdown

<select class="form-control" [ngModel]="value" (ngModelChange)="onChange($event)">
  <option selected value="0">{{ first_value }}</option>
  <option *ngFor="let i of data" [value]="i.id">
     {{i.city_name}}
  </option>
</select>

How can I add a filter like *ngIf="city_country == 'US'"?

Why do this in the template? Just filter the data array in the backing code. — R. Richards
– R. Richards, Commented May 22, 2021 at 17:48
@eko @R. Richards, Because depending on a env file, I'm trying to filter it on Frontend. For if env.name == 'X', if can display only city_country == 'US', if env.name == 'Y', I want to display only city_country == 'UK'. — astroboy1
– astroboy1, Commented May 22, 2021 at 17:52
This html is part of a component and that component has a data field, right? You can make this filtering operation in your component rather than doing it on the html. It doesn't matter where this filter is coming from. Your component.ts file still Frontend. — eko
– eko, Commented May 22, 2021 at 17:55
@eko Thanks. I have added the filter in my component. But is it not acceptable to add a check in HTML part? — astroboy1
– astroboy1, Commented May 22, 2021 at 18:34

Dharman · Accepted Answer · 2021-05-22 18:02:20Z

1

As we are using structural directive we couldn't use two on same tag.

so either you can use new variable to get all the city's within US or we can have a get function to get all the city's with in US

// inside component class    
get citiesWithinUS() {
  return this.data.filter(x => x.city_country === 'US')
}


// inside html page
<select class="form-control" [ngModel]="value" (ngModelChange)="onChange($event)">
  <option selected value="0">{{ first_value }}</option>
  <option *ngFor="let i of citiesWithinUS" [value]="i.id">
     {{i.city_name}}
  </option>
</select>

edited May 22, 2021 at 18:02

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered May 22, 2021 at 17:56

Akhil M

7447 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

using if condition in drop down in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related