How to pass dynamic variable value within an object string in Angular View

Question

I want to assign variable's value from Component to object string within Angular view.

This is snippet from typescript file

@Input() someVariable: string = '';
let someValueFromTypeScript: string = '';

ngOnChanges(): void {
   this.someValueFromTypeScript = (this.someVariable) ?  this.someVariable : 'default_value';
}

This is snippet from corresponding template

<div data-dl='{"prop1":"val1", "prop2":"val2", "prop3":"someValueFromTypeScript"}'>
...
</div>

I tried using string interpolation but it didn't worked. One constraint is that value to data-dl should be string only, so I cannot do something like:

<div attr.data-dl="JSON.stringify value of property">
...
</div>

Barremian · Accepted Answer · 2020-07-03 12:14:37Z

1

Since you insist on data-dl being a string, you could use the interpolation like following

<div attr.data-dl="{prop1:val1, prop2:val2, prop3:{{someValueFromTypeScript}}}">
  ...
</div>

On the other hand if you wish to have an object for data-dl attribute, you could try the property binding syntax

<div [attr.data-dl]="{'prop1':'val1', 'prop2':'val2', 'prop3':someValueFromTypeScript}">
  ...
</div>

Note: The type of quotation marks (single or double) doesn't have any bearing on the values. The only condition is it should be used interchangeably for member variables and string literals.

<div [attr.data-dl]="{'prop1':'val1', 'prop2':'val2', 'prop3':someValueFromTypeScript}">

is similar to

<div [attr.data-dl]='{"prop1":"val1", "prop2":"val2", "prop3":someValueFromTypeScript}'>

edited Jul 3, 2020 at 12:14

answered Jul 3, 2020 at 12:07

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Comments

Serhii Chyzhyk · Accepted Answer · 2020-07-03 11:54:12Z

1

Define a function into component.ts:

getSomeValueFromTypeScript(){
  return this.someValueFromTypeScript;
}

And then call it from html component into your object:

<div data-dl='{"prop1":"val1", "prop2":"val2", "prop3": getSomeValueFromTypeScript() }'>
...
</div>

answered Jul 3, 2020 at 11:54

Serhii Chyzhyk

1222 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to pass dynamic variable value within an object string in Angular View

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related