Concatenate in Angular HTML Input Variables

Question

How do I concatenate strings in Angular HTML Input? The following is creating dropdown. What we want is have txtField be concatenation of addressCode + ' ' + addressDescription, trying placing into input, did not work. Looking for way in html first, before trying in angular typescript if possible.

Original:

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

Attempt

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

is addressCode and addressDescription are the value of input field? — Harun Or Rashid
– Harun Or Rashid, Commented Dec 9, 2019 at 5:33
Its working here. Can not reproduce the same. Check here stackblitz.com/edit/… — Harun Or Rashid
– Harun Or Rashid, Commented Dec 9, 2019 at 5:35
hi @HarunurRashid for some reason no, its going off values in an array, along with wrapper on material design angular input — user12425844
– user12425844, Commented Dec 9, 2019 at 5:40

Allabakash · Accepted Answer · 2019-12-09 06:12:46Z

2

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.

answered Dec 9, 2019 at 6:12

Allabakash

2,0371 gold badge12 silver badges16 bronze badges

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

2 Comments

user12425844 Over a year ago

ok, I see why now, can you create an addendum to your answer, I had single quotes for values in question, thanks

Allabakash Over a year ago

you mean addressCode and addressDescription are strings ? or variables ?

Sahil Ralkar · Accepted Answer · 2019-12-09 05:59:44Z

0

You can create simply a function

in .ts

concateInput(str1, str2){
return str1.concat(str2);
}

and call it from .html

<app-drop-down 
  [listItems]="addressList"
  [txtField]="concateInput(addressCode, addressDescription)"
  [txtValue]="addressId"
</app-drop-down>

answered Dec 9, 2019 at 5:59

Sahil Ralkar

2,41225 silver badges26 bronze badges

1 Comment

Sahil Ralkar Over a year ago

when a user clicks on dropdown add that element into the array and pass that array to convert into a string.

Collectives™ on Stack Overflow

Concatenate in Angular HTML Input Variables

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related