[CL-553] Migrate CL to Control Flow syntax (#12390)

libs/components/src/stories/kitchen-sink/components/kitchen-sink-form.component.ts

@@ -49,11 +49,9 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
       <bit-form-field>
         <bit-label>Your favorite color</bit-label>
         <bit-select formControlName="favColor">
-          <bit-option
-            *ngFor="let color of colors"
-            [value]="color.value"
-            [label]="color.name"
-          ></bit-option>
+          @for (color of colors; track color) {
+            <bit-option [value]="color.value" [label]="color.name"></bit-option>
+          }
         </bit-select>
       </bit-form-field>
 

libs/components/src/stories/kitchen-sink/components/kitchen-sink-main.component.ts

@@ -36,9 +36,11 @@ class KitchenSinkDialog {
 
     <p class="tw-mt-4">
       <bit-breadcrumbs>
-        <bit-breadcrumb *ngFor="let item of navItems" [icon]="item.icon" [route]="[item.route]">
-          {{ item.name }}
-        </bit-breadcrumb>
+        @for (item of navItems; track item) {
+          <bit-breadcrumb [icon]="item.icon" [route]="[item.route]">
+            {{ item.name }}
+          </bit-breadcrumb>
+        }
       </bit-breadcrumbs>
     </p>
 

libs/components/src/stories/kitchen-sink/components/kitchen-sink-toggle-list.component.ts

@@ -16,11 +16,15 @@ import { KitchenSinkSharedModule } from "../kitchen-sink-shared.module";
         <bit-toggle value="small"> Mid-sized <span bitBadge variant="info">1</span> </bit-toggle>
       </bit-toggle-group>
     </div>
-    <ul *ngFor="let company of companyList">
-      <li *ngIf="company.size === selectedToggle || selectedToggle === 'all'">
-        {{ company.name }}
-      </li>
-    </ul>
+    @for (company of companyList; track company) {
+      <ul>
+        @if (company.size === selectedToggle || selectedToggle === "all") {
+          <li>
+            {{ company.name }}
+          </li>
+        }
+      </ul>
+    }
   `,
 })
 export class KitchenSinkToggleList {