Approach 2
In this approach, It contains a user interface with three buttons: “Toggle Success,” “Toggle Error,” and “Toggle Warning.” When a button is clicked, it triggers a corresponding function that changes the styling of the message that has been displayed accordingly with the help of *ngClass. The message is then displayed in an h3 element with a CSS class based on the active state. This allows for toggling between success, error, and warning messages dynamically.
Example: In this example, we are implementing the Conditional class with *ngClass in Angular, where the 3 toggle buttons are added that will render the message dynamically depending on the type of action.
- app.component.html
HTML
< div class = "container" > < div class = "row" > < div class = "col-xs-12" > < h2 >Welcome to GFG!!!</ h2 >< br > < button class = "btn btn-success" (click)="Success()"> Toggle Success </ button > < button class = "btn btn-danger" (click)="Error()"> Toggle Error </ button > < button class = "btn btn-warning" (click)="Warning()"> Toggle Warning </ button > < h3 class = "display" [ngClass]="{ 'Success': isSuccess, 'Error': isError , 'Warning':isWarning}"> {{message}} </ h3 > </ div > </ div > </ div > |
- app.component.css
CSS
h 2 { color : darkgreen; } .Success { color : black ; font-size : medium ; width : 350px ; padding : 20px ; background : lightgreen; } .Error { color : black ; font-size : medium ; width : 350px ; padding : 20px ; background : red ; } .Warning { color : black ; font-size : medium ; width : 350px ; padding : 20px ; background : yellow; } |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ], }) export class AppComponent { isSuccess: boolean = false ; isError: boolean = false ; isWarning: boolean = false ; message: string = '' ; Success() { this .isSuccess = true ; this .isError = false ; this .isWarning = false ; this .message = 'Success Clicked!' ; } Error() { this .isError = true ; this .isSuccess = false ; this .isWarning = false ; this .message = 'Danger Clicked!!' ; } Warning() { this .isWarning = true ; this .isError = false ; this .isSuccess = false ; this .message = 'Warning Clicked!!' ; } } |
Output:
Angular Conditional Class with *ngClass
In this article, we will see the basic implementation of the Conditional class with *ngClass in Angular, along with understanding their implementation with the help of examples.
Contact Us