Set css class dynamically in Angular from expression

There are times when you need to set a css class of a html element dynamically in angular, given a simple or complex condition. This was the case for me when I had to set a different backround-color and color attributes for an anchor a html element to display the latest searches on the landing page of Codever

Use ngClass (before)

You can do it by setting the desired css class directly to the ngClass input of the element. The thing is if the condition gets complex, as in my case where I used initially combined ?: construct it can get hard to read and understand:

<a
    (mouseover)="hoveringLastSearches[i]=true"
    (mouseout)="hoveringLastSearches[i]=false"
    [routerLink]="['/search']"
    [queryParams]="{q: mySearch.text, sd: mySearch.searchDomain }"
    class="badge badge-secondary mb-1  ml-1"
    [ngClass]="mySearch.searchDomain === 'my-snippets' ? 'snippet-last-search' : mySearch.searchDomain === 'my-bookmarks' ? 'my-bookmarks-last-search' : 'public-bookmarks-last-search' "
    title="Search in "
> <i class="fa fa-xs fa-search mr-1"></i>
    <span *ngIf="!hovering(i); else longVersion"></span>
    <ng-template #longVersion></ng-template>
    <i *ngIf="mySearch.searchDomain === 'my-snippets' || mySearch.searchDomain === 'public-snippets'"
       class="fa fa-xs fa-code ml-1"></i>
    <i *ngIf="mySearch.searchDomain === 'my-bookmarks' || mySearch.searchDomain === 'public-bookmarks'"
       class="fa fa-xs fa-bookmark ml-1"></i>
</a>

Set the css class directly to [class] input (after)

The second option, which I used eventually is to set your css class to the [class] attribute of the html element with the following syntax:

<a
    (mouseover)="hoveringLastSearches[i]=true"
    (mouseout)="hoveringLastSearches[i]=false"
    [routerLink]="['/search']"
    [queryParams]="{q: mySearch.text, sd: mySearch.searchDomain }"
    class="badge badge-secondary mb-1  ml-1"
    [class.my-snippets-last-search]="mySearch.searchDomain === 'my-snippets'"
    [class.public-snippets-last-search]="mySearch.searchDomain === 'public-snippets'"
    [class.my-bookmarks-last-search]="mySearch.searchDomain === 'my-bookmarks'"
    [class.public-bookmarks-last-search]="mySearch.searchDomain === 'public-bookmarks'"
    title="Search in "
> <i class="fa fa-xs fa-search mr-1"></i>
    <span *ngIf="!hovering(i); else longVersion"></span>
    <ng-template #longVersion></ng-template>
    <i *ngIf="mySearch.searchDomain === 'my-snippets' || mySearch.searchDomain === 'public-snippets'"
       class="fa fa-xs fa-code ml-1"></i>
    <i *ngIf="mySearch.searchDomain === 'my-bookmarks' || mySearch.searchDomain === 'public-bookmarks'"
       class="fa fa-xs fa-bookmark ml-1"></i>
</a>

In my opinion the latter is easier to grasp.

You can see the how it looks in action in the following animation:

Quick access to My Last Searches animation
Quick access to My Last Searches animation

Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Mongoose schema field from list of strings (enum)

Mongoose schema field from list of strings (enum) code snippet Continue reading

Set value of input field in angular template

Published on December 14, 2022

How to use jest test.each function

Published on December 14, 2022