CODEWITHSUNDEEP
htmlangularvariables
Jonas Alvarado
Jonas Alvarado

Reputation: 1

concatenate variables in angular property element

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...

Upvotes: 0

Views: 1792

Answers (3)

Jonas Alvarado
Jonas Alvarado

Reputation: 1

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!

Upvotes: 0

s.schleu
s.schleu

Reputation: 1361

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.

Upvotes: 1

Anshul Rasiwasia
Anshul Rasiwasia

Reputation: 245

You can try doing this

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

Upvotes: 0

Related Questions