Migration from NgClass to class bindings #11932

Author: PowerKiKi

projects/natural/src/lib/modules/search/search/search.component.html

@@ -1,4 +1,4 @@
-<div class="natural-search" [ngClass]="{mobile: isMobile | async, hasMultipleGroups: innerSelections().length > 1}">
+<div class="natural-search" [class.mobile]="isMobile | async" [class.hasMultipleGroups]="innerSelections().length > 1">
     <div class="groupsWrapper">
         @for (groupSelections of innerSelections(); track $index) {
             <div class="groupWrapper">

projects/natural/src/lib/modules/search/search/search.component.ts

@@ -10,20 +10,11 @@ import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
 import {MatIconButton} from '@angular/material/button';
 import {NaturalGroupComponent} from '../group/group.component';
-import {AsyncPipe, NgClass} from '@angular/common';
+import {AsyncPipe} from '@angular/common';
 
 @Component({
     selector: 'natural-search',
-    imports: [
-        NgClass,
-        AsyncPipe,
-        NaturalGroupComponent,
-        MatIconButton,
-        MatTooltip,
-        MatIcon,
-        NaturalIconDirective,
-        MatDivider,
-    ],
+    imports: [AsyncPipe, NaturalGroupComponent, MatIconButton, MatTooltip, MatIcon, NaturalIconDirective, MatDivider],
     templateUrl: './search.component.html',
     styleUrl: './search.component.scss',
 })

src/app/home/home.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar [class]="`nat-horizontal nat-left nat-center nat-gap`">
+<mat-toolbar class="nat-horizontal nat-left nat-center nat-gap">
     @if (menu) {
         <button mat-icon-button (click)="menu.toggle()">
             <mat-icon naturalIcon="menu" />