migrate angular 21

src/app/widget-modules/components/card/card.component.html

@@ -1,13 +1,18 @@
 <div [class.fullscreen]="fullscreen" [class.padding]="padding" class="card">
-  <button
-    *ngIf="closeLink && !fullscreen"
-    [routerLink]="closeLink"
-    class="btn-close"
-    mat-icon-button
-  >
-    <fa-icon [icon]="closeIcon"></fa-icon>
-  </button>
-  <div *ngIf="heading && !fullscreen" class="heading">{{ heading }}</div>
-  <div *ngIf="subheading && !fullscreen" class="subheading">{{ subheading }}</div>
+  @if (closeLink && !fullscreen) {
+    <button
+      [routerLink]="closeLink"
+      class="btn-close"
+      mat-icon-button
+      >
+      <fa-icon [icon]="closeIcon"></fa-icon>
+    </button>
+  }
+  @if (heading && !fullscreen) {
+    <div class="heading">{{ heading }}</div>
+  }
+  @if (subheading && !fullscreen) {
+    <div class="subheading">{{ subheading }}</div>
+  }
   <ng-content></ng-content>
 </div>

src/app/widget-modules/components/card/card.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {faTimes} from '@fortawesome/free-solid-svg-icons';
-import {NgIf} from '@angular/common';
+
 import {MatIconButton} from '@angular/material/button';
 import {RouterLink} from '@angular/router';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
@@ -9,7 +9,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
   selector: 'app-card',
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.less'],
-  imports: [NgIf, MatIconButton, RouterLink, FaIconComponent],
+  imports: [MatIconButton, RouterLink, FaIconComponent],
 })
 export class CardComponent {
   @Input() public padding = true;