Dynamically Add Bootstrap Class to element Angular 2

Question

I have a page that will have a handful of input boxes that I want to be able to flag for

       <div class="form-group">
            <label class="d-block">Allowance Type</label>
            <div class="input-group">
                <input type="text" class="form-control width-150" [(ngModel)]="selectedPricingItem.allowanceTypeDescription" readonly>
                <span class="input-group-addon mg-batch-flag" (click)="flagItem('allowanceTypeDescription','Allowance Type')" data-toggle="modal" data-target="#auditDialog">
                     <i class="fa fa-fw fa-flag" aria-hidden="true">
                     </i>
                </span>
            </div>
        </div>

I have this structure a few times on the page and I want to be able to a bootstrap class (has-danger) to them based on a the click event handler I have. In that handler I am just populating an instance of a class that I intend on submitting to a web service at this point. Is the best approach to create a component with the different styles and use *ngIf to hide/show?

Günter Zöchbauer · Accepted Answer · 2016-12-20 17:49:38Z

3

Just use a class binding

[class.has-danger]="propWithValue"

where propWithValue should have the value true or false to get the class added or removed. There is also [ngClass] for more complex scenarios like adding multiple classes.

answered Dec 20, 2016 at 17:49

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Isaac Levin Over a year ago

is this the best way to do it since i need to be able to control the class on multiple controls independently. this will make me have multiple variables to manage no?

Günter Zöchbauer Over a year ago

If you want to have multiple elements with each their own status, then yes, you need multiple variables. Alternatively you can use an array - depending on your use case. But I don't know any other way. To store a status you need a variable.

Isaac Levin Over a year ago

I am thinking that a component with a property called "status" would be the cleanest. Only issue is that I would have multiple on same page

Günter Zöchbauer Over a year ago

On the same page wouldn't matter. What matters is when it's within the same component.

Collectives™ on Stack Overflow

Dynamically Add Bootstrap Class to element Angular 2

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related