concatenate variables in angular property element

Question

I comment, and looked here and I can not find the solution, my problem is the following:

in my html template in angular, I need to pass a series of data to the metadata property of a button, I can't get the correct way to successfully concatenate the variable that contains the value.

this should be the html element:

<mati-button clientId="clientId" flowId="flowId" color="green"metadata='{"user_id":"1234778","email":"[email protected]"}'/>

I tried several ways but I can't insert the respective values....

example:

<mati-button  metadata='{"userID": "{{user.id}}" }'></mati-button>

unsuccessfully...

` metadata='{"userID": user.id }'`

Saksham
– Saksham

2021-08-20 14:53:07 +00:00
Commented Aug 20, 2021 at 14:53 — Saksham
– Saksham, Commented Aug 20, 2021 at 14:53

s.schleu · Accepted Answer · 2021-08-20 15:09:35Z

1

Assuming mati-button is an Angular component with metadata as Input(), you are probably looking for

<mati-button 
  [clientId]="clientId"
  [flowId]="flowId" 
  [color]="green"
  [metadata]="{ userId: '1234778', email: '[email protected]'}"
></mati-button>

See the guide on property binding to learn more:

To bind to an element's property, enclose it in square brackets, [], which identifies the property as a target property. [...] The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

By "dynamic expression" they mean JS-expressions, i.e., a public variable available through the component's TypeScript, a boolean expression, an array, or, like in your case, a JS-object that you can construct inline.

answered Aug 20, 2021 at 15:09

s.schleu

1,3611 gold badge16 silver badges22 bronze badges

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

2 Comments

Jonas Alvarado Over a year ago

that's my main problem that it is not a component of angular, it is a component of a third

Aviad P. Over a year ago

It doesn't matter, this answer should work. And if it doesn't then there's something else wrong here. You can replace '1234778' with user.id

Anshul Rasiwasia · Accepted Answer · 2021-08-20 14:53:16Z

0

You can try doing this

<mati-button  metadata="{'userID': user.id }"></mati-button>

answered Aug 20, 2021 at 14:53

Anshul Rasiwasia

2451 silver badge5 bronze badges

Comments

Jonas Alvarado · Accepted Answer · 2021-08-22 01:27:49Z

0

metadata='{" userID ": {{user.id}}}'

in the end I got it. Apparently I don't know why, but the third-party script hides that parameter and it couldn't be debugged in the console, but it does receive them without any problem! Thanks everyone for your help!

answered Aug 22, 2021 at 1:27

Jonas Alvarado

14 bronze badges

Collectives™ on Stack Overflow

concatenate variables in angular property element

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related