Angular display conditional text in html including conditional data-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

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 ;)

CodePudding user response：

I hope this works.

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