CODEWITHSUNDEEP
javascriptangular
Kiran Dash
Kiran Dash

Reputation: 4956

Angular 2 concatenate variable in interpolation

I have two related objects:

itemsObj = {
    'item1' : 'A1',
    'item2' : 'A2',
    'item3'  : 'B',
    'item4'  : 'C',
    'item5'  : 'D'
};

And:

itemsObj2 = {
    'A1' : 'Very conservative and up',
    'A2' : 'Conservative and up',
    'B'  : 'Balanced and up',
    'C'  : 'Growth and up',
    'D'  : 'Aggressive'
};

Interpolating {{itemsObj.item1}} will return A1 and {{itemsObj2.A1}} will return Very conservative and up.

How to concatenate itemsObj.item1 with itemsObj2.A1 to return Very conservative and up?

My attempt:

{{itemsObj2.itemsObj.item1}} but of course this is wrong. So may I know how to concatenate in my case?

Upvotes: 0

Views: 777

Answers (3)

Niladri Basu
Niladri Basu

Reputation: 10614

Do this: 

itemsObj2[itemsObj.item1]    //setting itemsObj.item1's value as itemsObj2's key

DEMO:

itemsObj = {
    'item1' : 'A1',
    'item2' : 'A2',
    'item3'  : 'B',
    'item4'  : 'C',
    'item5'  : 'D'
};

itemsObj2 = {
    'A1' : 'Very conservative and up',
    'A2' : 'Conservative and up',
    'B'  : 'Balanced and up',
    'C'  : 'Growth and up',
    'D'  : 'Aggressive'
};

console.log(itemsObj2[itemsObj.item1])

Upvotes: 2

maxime1992
maxime1992

Reputation: 23803

TS

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public items: string[];

  constructor() {
    const itemsObj = {
      'item1': 'A1',
      'item2': 'A2',
      'item3': 'B',
      'item4': 'C',
      'item5': 'D'
    };

    const itemsObj2 = {
      'A1': 'Very conservative and up',
      'A2': 'Conservative and up',
      'B': 'Balanced and up',
      'C': 'Growth and up',
      'D': 'Aggressive'
    };

    this.items = Object
      .values(itemsObj)
      .map(itemKey => itemsObj2[itemKey]);
  }
}

HTML

<div *ngFor="let item of items">
  {{ item }}
</div>

Output:

Very conservative and up
Conservative and up
Balanced and up
Growth and up
Aggressive

Stackblitz demo:

https://stackblitz.com/edit/angular-pbdfux?file=src%2Fapp%2Fapp.component.html

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

Since you need to match the key , you can do

   <h1> {{itemsObj2[itemsObj.item1]}}</h1>

STACKBLITZ DEMO

Upvotes: 1

Related Questions