Home change bootstrap class conditionally on DIV
Reply: 3

change bootstrap class conditionally on DIV

user7000
1#
user7000 Published in 2018-01-12 14:10:46Z

In my angular 4 app, I have a div which displays a message. This message should use class alert alert-success or alert alert-danger based on message shown. How I can I use one message and switch the class names.

<div class="alert alert-success" *ngIf="message.length > 0" >                                        
   <strong role="alert">{{message}}</strong>
</div> 
Vivek Doshi
2#
Vivek Doshi Reply to 2018-01-12 14:31:56Z

You can use this :

<div [ngClass]="{'class1': true, 'class2': true, 'class3': false}">...</div>

OR

<div [ngClass]="{'class1 class2': true}">...</div>
santosh singh
3#
santosh singh Reply to 2018-01-12 14:34:02Z

You can use ngClassbinding

  <div [ngClass]="message.length > 0? 'alert  alert-success' : 'alert  alert-danger'">
Sandip Jaiswal
4#
Sandip Jaiswal Reply to 2018-01-12 14:14:52Z

You should use ngClass. Use following code:

<div class="alert" [ngClass]="{'alert-success': expression, 'alert-success': expression}"></div>

Hope it will help

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.322858 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO