Add condition by [attr.data-show] values in template

user_218349 0
Viewed 96

I am trying to implement a condition in template using attr.data-show attribute value. but it's not works. what is the correct way to handle this?

here is my code :

<p [attr.data-show]="false" *ngIf="{{this.attr.data-show}}">
  Start editing to see some magic happen :)
</p>

any one help me?

Live Demo

Thanks in Advance.

angular-template angular-ng-if angular8 angular
2 Answers

You need to access a - separated poperty like: attrOb['data-show']

<p [attr.data-show]="false" *ngIf="attrOb['data-show']">
  Start editing to see some magic happen :)
</p>

This would also mean, that you have attrOb in .ts

attrOb: any = {
  'data-show': true
}

You can find your modified code here: Link

user_49764220

I am still not exactly sure what you're looking for. But to control the visibility of an element within a template, you could use <ng-template> to create embedded views and use their context properties. Try the following

<ng-template #textShow let-show>
  <ng-container *ngIf="show">
    <p>Start editing to see some magic happen :)</p>
  </ng-container>
</ng-template>

<ng-template 
  [ngTemplateOutlet]="textShow" 
  [ngTemplateOutletContext]="{ $implicit: true }"
></ng-template>

Now you could control the visibility using the property $implicit: true (show content) and $implicit: false (don't show content).

Working example: Stackblitz

user_65139210
Related