Angular display conditional text in html including conditional data

Question

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?

Answer 1

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>

Answer 2

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