Динамически Добавить Bootstrap класс к элементу Угловое 2

Question

У меня есть страница, которая будет иметь несколько полей ввода, которые я хочу, чтобы иметь возможность флаг для

 <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> 

У меня есть эта структура несколько раз на странице и Я хочу иметь возможность загрузочного класса (имеет-опасность) для них на основе обработчика события клика, который у меня есть. В этом обработчике я просто заполняю экземпляр класса, который я намереваюсь отправить на веб-службу в этот момент. Является наилучшим подходом для создания компонента с разными стилями и использования * ngIf, чтобы скрыть/показать?

Answer 1

Просто используйте класс связывания

[class.has-danger]="propWithValue" 

propWithValue, где должен иметь значение true или false, чтобы получить класс добавляется или удаляется. Существует также [ngClass] для более сложных сценариев, таких как добавление нескольких классов.