Angular 2 Concatenate Variable in Interpolation

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])

Concat two *ngfor variables in interpolation angular 4

you can try this

<div *ngFor="let profile of allSupprotProfiles">
  <div *ngFor="let columnName of defaultColumns >
      <tr> <th>{{columnName}}</th> <td>{{ profile[columnName] }}</td> </tr>
  </div>
</div>

How can I easily concatenate typescript variable with string in html tag?

As explained in Angular documentation, you can use interpolation:

id="{{'m' + elementid}}"

or property binding:

[id]="'m' + elementid"

Angular 2 Dart: Template syntax - how to concatenate strings?

The best way is to declare a getter inside your Component controller that does the concatenation for you, you will get dart syntax support and the html template will looks cleaner.

String get myConcatenation => "${order.pickupPlace.name}${order.pickupPlace.email}";


<div id="abc">
   {{myConcatenation}}
</div>

How to pass a concatenated string as a parameter to function: Angular 2

(click)="myFunction(requestForm.controls['nameEdit' + i].value") should do the trick

Since double quotes for event directives (...) are interpolated, the {{ ... }} is unnecessary. You will need to also use the javascript object identifier [...] with the dynamic text.

Lastly, this will obviously return error if the controls doesn't have a key with the name you're trying to parse. It would be best practice to have myFunction(...) manage this case.

Working stackblitz example that outputs the values: https://stackblitz.com/edit/angular-whq8ll-od64hx?file=app/slider-overview-example.html

How to concatenate variable with hard coded value inside click event in Angular4

In your ts, add a variable to store every item's state:

toggleAccordions: any = {};

Change you template to following:

<div class="popCheckListDropMain" *ngFor="let srkey of srDataList; let i = index">
  <h4 (click)="toggleAccordions['accord'+i]=!toggleAccordions['accord'+i]">{{srkey.key}} </h4>
  <ul class="popCheckListDropList" *ngIf="toggleAccordions['accord'+i]">
    <li *ngFor="let list of srkey.list">
        <div class="customCheckBox">
            <input type="checkbox" id="{{list.name}}" name="{{list.name}}" [(ngModel)]="list.isSelected"
            >
            <div class="check"></div>
        </div>
        <label for="{{list.name}}" >{{list.name}} {{list.isSelected}} </label>
    </li>
  </ul>
</div>

Concatenate in Angular HTML Input Variables

You can try like this -

<app-drop-down 
  [listItems]="addressList"
  txtField="{{addressCode + addressDescription}}"
  [txtValue]="addressId"
</app-drop-down>

But following way also should work , as you mentioned in your question.

<app-drop-down 
  [listItems]="addressList"
  [txtField]="addressCode + addressDescription"
  [txtValue]="addressId"
</app-drop-down>

Here is the demo - https://stackblitz.com/edit/angular-59242999
Hope this helps, Let me know still if it does not work for you.

Difference between interpolation and concatenation in JavaScript?

In Angular js interpolation helps in getting model render on the view. Where as concatenation is to allow the strings to be join together with '+' it may or may not include interpolation .

Example:-

{{}} --> interpolation

It allows your model to bind in view:-

Model:-  $scope.name="rachit";

   View:-  <div>{{name}}</div>

   result in View after rendering :- <div>rachit</div>

'+'-->concatenation

It allows to concat the values either in view or in controller or even inside interpolation.

Controller:-
$scope.name="rachit"+"gulati";

View
<div>{{name+name}}</div> //Here interpolation also comes into picture.
result:-"<div>rachitgualtirachitgualti</div>"

UPDATE 1:-

EDIT: Is this interpolation or concatenation (I don't just put strings
together but an a variable is resolved here)?

var test1 = "Hello";
var number = 2 + 3;
console.log(test1 + " " + number);

It is simple concatenation in javascript here angular is not come into picture.

UPDATE 2:-

Hmm.... I guess whenever I use AngularJS library to combine some
expression, then it's interpolation, right?

Concatenation is general term for every programming to concat two strings together.Where as in angualr js interpolation is done by {{}} with the help of $interpolation service.

How to concatenate string in template?

Alternative to the solution in the other question, you could also do the following

1. The interpolation must be inside the quotes.
2. The plus symbol isn't required.

<input type="checkbox" id="cb{{data.id}}" />
<label for="cb{{data.id}}">
  <img class="card-image" [src]="imgUrl"/>
</label>

Working example: Stackblitz

---

Related Topics