Могу ли я сделать код css в выражении angular "else"

Question

Так что у меня возникли проблемы в операторе angular if, я хочу написать css строку кода в случае, если инструкция if ложна. Может ли кто-нибудь мне помочь?

Вот код в HTML коде файла:

<div *ngIf="city.length < 16; else BigName">{{city}}</div>
                             <ng-template #BigName>
                                .desktopCityFilterName {
                                padding-right: 0;
                                padding-left: 15px;
                                width: 205px;
                            }
                            {{city}}
                            </ng-template> 

Если я не дал понять, что я хочу сделать, это отобразить имя, если его длина меньше 16 символов, а если нет, измените размер контейнера и затем отобразите его.

Answer 1

Вы должны использовать ngClass. Это синтаксис: [ngClass] = "{'class': true}"

<div [ngClass]="{'desktopCityFilterName': city.length > 16}">

Класс добавляется только в том случае, если длина> 16.

Answer 2

Используйте директивы [ngClass] или [ngStyle] для прикрепления динамических элементов c css. Если вы извлечете ваш css в класс, вы можете сделать следующее:

<div [ngClass]="{'className': city.length < 16}">{{city}}</div>

Или вы можете выполнить функцию, которая будет возвращать список (или один) css classess. Другой способ - использовать [ngStyle]. Вы можете выполнить функцию, которая будет возвращать объект с вашим стилем:

getStyle = () => {backgroundColor: 'red'};

И внутри Html файла:

<div [ngStyle]="getStyle()">{{city}}</div>

Answer 3

Чтобы добавить условный класс в Angular, вы можете передать объект в ngClass, где ключ - это имя класса, а значение - это условие.

<div [ngClass]="{'classname' : condition}"></div>

Добавить класс на основе несколько условий

<div [ngClass]="{'warn': priority > 10 && priority  < 20}">
    {{text}}
</div> 

Передать метод в ngClass

<div [ngClass]="getClass(priority)">{{text}}</div>

getClass(priority){
  var classList='';
  if(priority < 10){
     classList = 'message'; 
  }else if (priority > 10 && priority < 20){
      classList = 'warn';
  }else if(priority > 30){
      classList = 'error';
  }
  return classList;
}