Menu
I have to display two mutually exclusive buttons 'MARK COMPLETED' and 'COMPLETED'. If the task status is OPEN then 'MARK COMPLETED' needs to display, whereas if the task status is closed then 'COMPLETED' button needs to display.
<div *ngFor="#task of tasks" class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
<h2 class="mdl-card__title-text">{{task.taskname}}</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
{{task.taskdesc}} {{task.taskstatus}}
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">{{task.assignedto}}</a>
<a [routerLink]="['/AllTasks']" *ngIf="{{task.taskstatus}}='OPEN'" class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="onClickMark(task)">Mark Completed</a>
<a [routerLink]="['/CompletedTasks']" *ngIf="{{task.taskstatus}}='CLOSED'" class="mdl-button mdl-js-button mdl-js-ripple-effect">Completed</a>
</div>
I tried *ngIf="{{task.taskstatus}}='OPEN'" , but it's not working. Any ideas ?
845
You can use interpolation to display the value of a variable in the component's class in the component's view template. Since showData is true, the <ul> list will be displayed. If you want to hide it, we just change the value of showData to false.
String Interpolation in Angular 8 is a one-way data-binding technique that is used to transfer the data from a TypeScript code to an HTML template (view). It uses the template expression in double curly braces to display the data from the component to the view.
In Angular, you can use interpolation syntax for data binding for an expression as {{ expression}} . You can use inline expression or member variable inside {{ }} interpolation operator. Sometimes, you would like to use different interpolation characters instead of {{ }} for data binding. For example [ expession ].
Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.
* already indicates to Angular that it needs to process the value as expression. {{}} in expressions is invalid.
Use instead:
*ngIf="task.taskstatus=='OPEN'"
Also for compairson == instead of = (assignment) is required.
135
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
