Angular 5 binding to a specific item in an array

Question

I have an array of countries in an Angular template-driven form

"countries" : [  
   {  
      "id":1,
      "code":"NL"
   },
   {  
      "id":2,
      "code":"US"
   }
]

I have a selected id in a model: 2

I want to bind the value "US" in a div. Something like this:

<div>{{countries[id==model.countryId].code}}</div>

Is this possible in angular 5? I see on the web that a filter pipe for an array does not exist in angular anymore.

I get it working like this, but this is not really nice i'd say:

<ng-container *ngFor="let country of countries">
   <div *ngIf="country.id==parentModel.countryId">{{country.code}}</div>
</ng-container>

what is the expected one can you please explain in detail?

Aravind
– Aravind

2018-02-01 09:05:11 +00:00
Commented Feb 1, 2018 at 9:05 — Aravind
– Aravind, Commented Feb 1, 2018 at 9:05
I expect to get <div>US<div> in de dom as result.

Johannes Klapwijk
– Johannes Klapwijk

2018-02-01 09:25:31 +00:00
Commented Feb 1, 2018 at 9:25 — Johannes Klapwijk
– Johannes Klapwijk, Commented Feb 1, 2018 at 9:25

Vishal · Accepted Answer · 2018-02-01 10:02:01Z

8

you can create a getter property in the typescript and use it like this:

TS:

get CountryCode() {
    let country = this.countries.find(x=>x.id == this.parentModel.countryId);
    return country && country.code;
}

HTML

<div>{{ CountryCode }}</div>

edited Feb 1, 2018 at 10:02

Vishal

11k22 gold badges90 silver badges136 bronze badges

answered Feb 1, 2018 at 9:04

Ayman El Temsahi

2,6102 gold badges19 silver badges29 bronze badges

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

Comments

Gianluca Paris · Accepted Answer · 2018-02-01 09:05:36Z

0

ngx-pipes (https://github.com/danrevah/ngx-pipes) has some interesting pipes, for example filterBy, that you can use this way:

{{ countries | filterBy: ['id']: yourID }}

That returns the countries with the id you specify. It also has pipes for every situation

answered Feb 1, 2018 at 9:05

Gianluca Paris

1,4291 gold badge15 silver badges26 bronze badges

Comments

wEsS__WeSs · Accepted Answer · 2022-11-03 14:35:57Z

0

For anyone else trying to make this work, you can create a pipe for it like this , feel free to make it as clean as possible

transform(value: any[], id: any): any {
 // I initialized country to an array because filter returns an array with one object

 let country: any = [];

 name = value.filter((item: any) => {
     if (item.id === Number(id)) {
       return item;
     }
 });

  // this returns the country code as a string
  return name[0] ?.code;
}

Then on the HTML just bind like this

{{ countries | getCountryCode : model.countryId}}

edited Nov 3, 2022 at 14:35

answered Nov 3, 2022 at 14:32

wEsS__WeSs

11 bronze badge

Collectives™ on Stack Overflow

Angular 5 binding to a specific item in an array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related