CODEWITHSUNDEEP
typescriptangularng-class
Sireini
Sireini

Reputation: 4262

Angular2 is there a way to set bootstrap col dynamically?

Is it possible to use an If statement to set the column width of the div? I have got different div elements like this:

    <div class="col-xs-3">
        <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
            <option *ngFor="#p of prototypes" [value]="p.selector">
                {{ p.selectorName }}
            </option>
        </select>
    </div>

    <div class="col-xs-1" *ngIf="prototype?.valueType === 'Set'">
       <p class="text-center">If</p>
   </div>

How can I change the col-xs-3 above to col-xs-2 for example when prototype?.valueType === 'Set'

Upvotes: 2

Views: 1759

Answers (2)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657356

Use ngClass:

<div [ngClass]="{
    'col-xs-3': prototype?.valueType !== 'Set',
    'col-xs-2': prototype?.valueType === 'Set'}">

See also https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

Upvotes: 6

Thierry Templier
Thierry Templier

Reputation: 202196

I would leverage NgClass for this:

<div [ngClass]="{'col-xs-2': prototype?.valueType === 'Set', 'col-xs-3': 'prototype?.valueType !== 'Set''}">

Upvotes: 2

Related Questions