I have a scenario where I need to implement two different buttons in my template. The first button is as follows:
<button
[style.background-color]="service_rec.status ==
'Online' ? 'green' : 'red'" class="btn btn-default">
{{ service_rec.status }}
</button>
The second button is displayed based on a condition using *ngIf and also has a click event attached to it. Here's the code snippet for the second button:
<button *ngIf="!!service_rec.servicecontrolled"
[style.background-color]="service_rec.controlled ==
'true' ? 'green' : 'orange'"
class="btn btn-warning"
(click)="onPost(service_rec.title, service_rec.status, service_rec.id)">
{{ service_rec.servicecontrolled | json | toOnOff }}
</button>
Additionally, there is a custom pipe called 'toOnOff' which transforms a boolean value into either 'Stop' or 'false'. Here is the implementation of the custom pipe:
@Pipe({ name: 'toOnOff' })
export class OnOffPipe implements PipeTransform {
transform(value: boolean): string {
return (!!value) ? 'Stop' : 'false';
}
}
The next requirement is to create another custom pipe that will generate a 'Start' button instead of a 'Stop' button when the second button shows 'Offline' instead of 'Online'.