Angular 7 - *ngIf 在 div 上使用 class

Question

I have the following div on my angular project:

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

Where I have two options: isPreviewExpanded can be true or false

if it's true I want to show it as it right now but if it's false I need to show like this:

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

The class changes within the value of isPreviewExpanded

I'm not being able to find any way to do that in the same div , something like:

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

Any ideas?

Answer 1

Use ngClass directive that adds and removes CSS classes on an HTML element.

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

Answer 2

You can do it using NgClass . There are multiple ways how to do it. Some ideas:

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

or

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