CODEWITHSUNDEEP
htmlangulardynamicangular-materialstring-interpolation
Iwoo
Iwoo

Reputation: 177

Angular display conditional text in html including conditional data

I know in Angular2+ we can create condition in html like this:

  <p>{{ dynamicData.value? dynamicData.value : dynamicData.default}}</p>

Also we can do something like this:

  <p>{{ dynamicData.value? 'text 1' : 'text 2'}}</p>

But I would like to combine this two solutions and I have no idea how to do this. In general I would like to do something like this:

  <p>{{ dynamicData.value? 'Dynamic data value is equal: {{dynamicData.value}}' : 'no dynamic data'</p>

Have you any idea how to handle this text interpolation?

Upvotes: 5

Views: 14623

Answers (4)

fasihshaikh
fasihshaikh

Reputation: 1

I hope this works.

 <p>{{ dynamicData.value ? (`Dynamic data value is equal: ${dynamicData?.value}`) : `no dynamic data`}}</p>

Upvotes: -1

Siddhant
Siddhant

Reputation: 3171

You do not need to use interpolation within interpolation, you already have access to variables and can try something as below:

<p>{{ dynamicData?.value ? ('Dynamic data value is equal: ' + dynamicData?.value) : 'no dynamic data'}}</p>

Upvotes: 10

Yodde
Yodde

Reputation: 149

You can use variable in your .ts file or you can use + interpolation 'Dynamic data value is equal: ' + dynamicData.default.

But I like more answer posted by FedMice ;)

Upvotes: 1

FedG
FedG

Reputation: 1301

<p *ngIf = "dynamicData.value"> 'Dynamic data value is equal' {{dynamicData.value}} </p>
<p *ngIf = "!dynamicData.value"> 'no dynamic data' </p>

Upvotes: 3

Related Questions