Angular 7 - * ngIf на div для использования класса

Question

У меня есть div в моем angular проекте:

<div *ngIf="isPreviewExpanded" class="project-daypart-group-columns-container-expanded pull-left">

Где у меня есть два варианта: isPreviewExpanded может быть истинным или ложным

если это правда, я Я хочу показать это прямо сейчас, но если оно ложное, мне нужно показать так:

<div *ngIf="!isPreviewExpanded" class="project-daypart-group-columns-container-collapsed pull-left">

Класс изменяется в пределах значения isPreviewExpanded

Я не могу найти способ сделать это в том же div, что-то вроде:

<div *ngIf="isPreviewExpanded" class="project-daypart-group-columns-container-expanded; else class='project-daypart-group-columns-container-collapsed'>

Есть идеи?

Answer 1

Используйте директиву ngClass , которая добавляет и удаляет CSS классы для элемента HTML.

<div class="pull-left" [ngClass]="'project-daypart-group-columns-container-expanded':isPreviewExpanded, 'project-daypart-group-columns-container-collapsed': !isPreviewExpanded>

Answer 2

Вы можете сделать это, используя NgClass. Есть несколько способов, как это сделать. Некоторые идеи:

get dynamicClass(): string {
    return this.isPreviewExpanded ? 
        'project-daypart-group-columns-container-expanded' : 
        'project-daypart-group-columns-container-collapsed';
}

<div *ngIf="isPreviewExpanded class="pull-left' [ngClass]="dynamicClass">

или

<div
*ngIf="isPreviewExpanded"
class="pull-left"
[ngClass]="{
    'project-daypart-group-columns-container-expanded': isPreviewExpanded,
    'project-daypart-group-columns-container-collapsed': !isPreviewExpanded
}"
></div>