refactor: use control flow

Author: xidedix

projects/coreui-angular/src/lib/alert/alert.component.html

@@ -1,10 +1,9 @@
-<ng-container *ngIf="visible || !hide">
-  <ng-template [ngIf]="dismissible">
-    <ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate">
-    </ng-container>
-  </ng-template>
-  <ng-content></ng-content>
-</ng-container>
+@if (visible || !hide) {
+  @if (dismissible) {
+    <ng-container *ngTemplateOutlet="templates?.alertButtonCloseTemplate || defaultAlertButtonCloseTemplate" />
+  }
+  <ng-content />
+}
 
 <ng-template #defaultAlertButtonCloseTemplate>
   <button (click)="visible=false" aria-label="Close" cButtonClose></button>

projects/coreui-angular/src/lib/alert/alert.component.ts

@@ -9,7 +9,7 @@ import {
   Output,
   QueryList
 } from '@angular/core';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { animate, AnimationEvent, state, style, transition, trigger } from '@angular/animations';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 
@@ -25,7 +25,7 @@ type AnimateType = ('hide' | 'show');
   styleUrls: ['./alert.component.scss'],
   exportAs: 'cAlert',
   standalone: true,
-  imports: [NgIf, NgTemplateOutlet, ButtonCloseDirective],
+  imports: [NgTemplateOutlet, ButtonCloseDirective],
   animations: [
     trigger('fadeInOut', [
       state('show', style({ opacity: 1, height: '*', padding: '*', border: '*', margin: '*' })),

projects/coreui-angular/src/lib/avatar/avatar.component.html

@@ -1,11 +1,14 @@
 <ng-container>
-  <ng-container *ngTemplateOutlet="defaultImageTemplate"></ng-container>
-  <span *ngIf="!!status" [ngClass]="statusClass"></span>
+  <ng-container *ngTemplateOutlet="defaultImageTemplate" />
+  @if (!!status) {
+    <span [ngClass]="statusClass"></span>
+  }
 </ng-container>
 
 <ng-template #defaultImageTemplate>
-  <img *ngIf="!!src; else imageContent" [src]="src" class="avatar-img" />
-  <ng-template #imageContent>
-    <ng-content></ng-content>
-  </ng-template>
+  @if (!!src) {
+    <img [src]="src" class="avatar-img" />
+  } @else {
+    <ng-content />
+  }
 </ng-template>

projects/coreui-angular/src/lib/avatar/avatar.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
 
@@ -9,8 +9,7 @@ import { Colors, Shapes, Sizes, TextColors } from '../coreui.types';
   standalone: true,
   imports: [
     NgTemplateOutlet,
-    NgClass,
-    NgIf
+    NgClass
   ]
 })
 export class AvatarComponent {

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.html

@@ -1,24 +1,23 @@
-<a *ngIf="!active; else activeItem"
-   [routerLink]="url"
-   [cHtmlAttr]="attributes ?? {}"
-   [target]="attributes?.['target']"
-   [queryParams]="linkProps?.queryParams ?? null"
-   [fragment]="linkProps?.fragment"
-   [queryParamsHandling]="linkProps?.queryParamsHandling ?? null"
-   [preserveFragment]="linkProps?.preserveFragment ?? false"
-   [skipLocationChange]="linkProps?.skipLocationChange ?? false"
-   [replaceUrl]="linkProps?.replaceUrl ?? false"
-   [state]="linkProps?.state ?? {}"
->
-  <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate"></ng-container>
-</a>
-
-<ng-template #activeItem>
+@if (!active) {
+  <a [routerLink]="url"
+     [cHtmlAttr]="attributes ?? {}"
+     [target]="attributes?.['target']"
+     [queryParams]="linkProps?.queryParams ?? null"
+     [fragment]="linkProps?.fragment"
+     [queryParamsHandling]="linkProps?.queryParamsHandling ?? null"
+     [preserveFragment]="linkProps?.preserveFragment ?? false"
+     [skipLocationChange]="linkProps?.skipLocationChange ?? false"
+     [replaceUrl]="linkProps?.replaceUrl ?? false"
+     [state]="linkProps?.state ?? {}"
+  >
+    <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
+  </a>
+} @else {
   <span [cHtmlAttr]="attributes ?? {}">
-      <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate"></ng-container>
+      <ng-container *ngTemplateOutlet="defaultBreadcrumbItemContentTemplate" />
   </span>
-</ng-template>
+}
 
 <ng-template #defaultBreadcrumbItemContentTemplate>
-  <ng-content></ng-content>
+  <ng-content />
 </ng-template>

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-item/breadcrumb-item.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { RouterModule } from '@angular/router';
 
 import { HtmlAttributesDirective } from '../../shared';
@@ -10,7 +10,7 @@ import { INavAttributes, INavLinkProps } from './breadcrumb-item';
   templateUrl: './breadcrumb-item.component.html',
   styleUrls: ['./breadcrumb-item.component.scss'],
   standalone: true,
-  imports: [RouterModule, NgIf, NgTemplateOutlet, HtmlAttributesDirective]
+  imports: [RouterModule, NgTemplateOutlet, HtmlAttributesDirective]
 })
 export class BreadcrumbItemComponent {
 

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.html

@@ -1,6 +1,6 @@
 <c-breadcrumb class="m-0">
-  <ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs | async" let-last="last">
-    <ng-container *ngIf="breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)">
+  @for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {
+    @if (breadcrumb?.label && (breadcrumb?.url?.slice(-1) === '/' || last)) {
       <c-breadcrumb-item
         [active]="last"
         [url]="breadcrumb?.url"
@@ -9,6 +9,6 @@
       >
         {{ breadcrumb?.label }}
       </c-breadcrumb-item>
-    </ng-container>
-  </ng-template>
+    }
+  }
 </c-breadcrumb>

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.scss

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { Observable, Observer } from 'rxjs';
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 
 import { IBreadcrumbItem } from '../breadcrumb-item/breadcrumb-item';
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
@@ -10,9 +10,8 @@ import { BreadcrumbItemComponent } from '../breadcrumb-item/breadcrumb-item.comp
 @Component({
   selector: 'c-breadcrumb-router, [cBreadcrumbRouter]',
   templateUrl: './breadcrumb-router.component.html',
-  styleUrls: ['./breadcrumb-router.component.scss'],
   standalone: true,
-  imports: [BreadcrumbComponent, BreadcrumbItemComponent, NgForOf, NgIf, AsyncPipe]
+  imports: [BreadcrumbComponent, BreadcrumbItemComponent, AsyncPipe]
 })
 export class BreadcrumbRouterComponent implements OnChanges, OnDestroy, OnInit {
   constructor(

projects/coreui-angular/src/lib/breadcrumb/breadcrumb-router/breadcrumb-router.component.ts

@@ -1,5 +1,8 @@
-<div #content *ngIf = "hasContent; else defaultContent"><ng-content></ng-content></div>
-<ng-template #defaultContent>
+@if (hasContent) {
+  <div #content>
+    <ng-content />
+  </div>
+} @else {
   <span [class]="carouselControlIconClass" [attr.aria-label]="direction" [attr.aria-hidden]="true"></span>
-  <span class="visually-hidden">{{caption}}</span>
-</ng-template>
+  <span class="visually-hidden">{{ caption }}</span>
+}