WIP: replace bkdLet with @let & migrate remaining ngFor/ngIf

Author: hupf

src/app/dashboard/components/dashboard-layout/dashboard-layout.component.html

@@ -1,47 +1,40 @@
-<div
-  *bkdLet="{
-    loading: dashboardService.loading$ | async,
-    hasSearch: dashboardService.hasSearch$ | async,
-    hasActions: dashboardService.hasActions$ | async,
-    hasTimetable: dashboardService.hasTimetable$ | async,
-  } as data"
->
+@let loading = dashboardService.loading$ | async;
+@let hasSearch = dashboardService.hasSearch$ | async;
+@let hasActions = dashboardService.hasActions$ | async;
+@let hasTimetable = dashboardService.hasTimetable$ | async;
+<div>
   <h1
-    [class.visually-hidden]="
-      data.loading || data.hasSearch || data.hasActions || data.hasTimetable
-    "
+    [class.visually-hidden]="loading || hasSearch || hasActions || hasTimetable"
   >
     {{ "dashboard.heading" | translate }}
   </h1>
-  @if (data.loading) {
+  @if (loading) {
     <bkd-spinner></bkd-spinner>
   }
-  @if (
-    !data.loading && !data.hasSearch && !data.hasActions && !data.hasTimetable
-  ) {
+  @if (!loading && !hasSearch && !hasActions && !hasTimetable) {
     <p>
       {{ "dashboard.no-access" | translate }}
     </p>
   }
 
   <div class="columns">
-    @if (data.hasSearch || data.hasActions) {
+    @if (hasSearch || hasActions) {
       <div class="search-actions-column">
-        @if (data.hasSearch) {
+        @if (hasSearch) {
           <div>
             <h2>{{ "dashboard.search.title" | translate }}</h2>
             <bkd-dashboard-search></bkd-dashboard-search>
           </div>
         }
-        @if (data.hasActions) {
+        @if (hasActions) {
           <div>
             <h2>{{ "dashboard.actions.title" | translate }}</h2>
             <bkd-dashboard-actions></bkd-dashboard-actions>
           </div>
         }
       </div>
     }
-    @if (data.hasTimetable) {
+    @if (hasTimetable) {
       <div class="timetable-column">
         <h2>{{ "dashboard.timetable.title" | translate }}</h2>
         <bkd-dashboard-timetable></bkd-dashboard-timetable>

src/app/dashboard/components/dashboard-layout/dashboard-layout.component.ts

@@ -2,7 +2,6 @@ import { AsyncPipe } from "@angular/common";
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 import { TranslateModule } from "@ngx-translate/core";
 import { SpinnerComponent } from "../../../shared/components/spinner/spinner.component";
-import { LetDirective } from "../../../shared/directives/let.directive";
 import { DashboardService } from "../../services/dashboard.service";
 import { DashboardActionsComponent } from "../dashboard-actions/dashboard-actions.component";
 import { DashboardSearchComponent } from "../dashboard-search/dashboard-search.component";
@@ -15,7 +14,6 @@ import { DashboardTimetableComponent } from "../dashboard-timetable/dashboard-ti
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    LetDirective,
     SpinnerComponent,
     DashboardSearchComponent,
     DashboardActionsComponent,

src/app/dashboard/components/dashboard-timetable/dashboard-timetable.component.html

@@ -30,21 +30,20 @@
   }
 </div>
 
-<ng-container *bkdLet="timetableEntries$ | async as entries">
-  @if ((loading$ | async) === false) {
-    <bkd-dashboard-timetable-table
-      [entries]="entries"
-    ></bkd-dashboard-timetable-table>
-    @if (getSubscribeCalendarUrl() | async; as url) {
-      <a
-        [href]="url | safe: 'url'"
-        target="_parent"
-        class="btn btn-secondary subscribe-calendar-bottom"
-      >
-        {{ "dashboard.timetable.subscribe-calendar" | translate }}
-      </a>
-    }
-  } @else {
-    <bkd-spinner></bkd-spinner>
+@let entries = timetableEntries$ | async;
+@if (loading$ | async) {
+  <bkd-spinner></bkd-spinner>
+} @else {
+  <bkd-dashboard-timetable-table
+    [entries]="entries"
+  ></bkd-dashboard-timetable-table>
+  @if (getSubscribeCalendarUrl() | async; as url) {
+    <a
+      [href]="url | safe: 'url'"
+      target="_parent"
+      class="btn btn-secondary subscribe-calendar-bottom"
+    >
+      {{ "dashboard.timetable.subscribe-calendar" | translate }}
+    </a>
   }
-</ng-container>
+}

src/app/dashboard/components/dashboard-timetable/dashboard-timetable.component.ts

@@ -18,7 +18,6 @@ import { LessonPresencesRestService } from "src/app/shared/services/lesson-prese
 import { StudentsRestService } from "src/app/shared/services/students-rest.service";
 import { UserSettingsService } from "src/app/shared/services/user-settings.service";
 import { SpinnerComponent } from "../../../shared/components/spinner/spinner.component";
-import { LetDirective } from "../../../shared/directives/let.directive";
 import { SafePipe } from "../../../shared/pipes/safe.pipe";
 import { DashboardService } from "../../services/dashboard.service";
 import { DashboardTimetableTableComponent } from "../dashboard-timetable-table/dashboard-timetable-table.component";
@@ -42,7 +41,6 @@ const CALENDAR_SUBSCRIBE_KEY = "cal";
   styleUrls: ["./dashboard-timetable.component.scss"],
   standalone: true,
   imports: [
-    LetDirective,
     DashboardTimetableTableComponent,
     SpinnerComponent,
     AsyncPipe,

src/app/edit-absences/components/edit-absences-edit/edit-absences-edit.component.html

@@ -1,14 +1,11 @@
+@let confirmationStates = confirmationStates$ | async;
+@let categories = activeCategories$ | async;
+@let formGroup = formGroup$ | async;
+
 <h1>{{ "edit-absences.title" | translate }}</h1>
-<div
-  class="bkd-container bkd-container-limited"
-  *bkdLet="{
-    confirmationStates: confirmationStates$ | async,
-    categories: activeCategories$ | async,
-    formGroup: formGroup$ | async,
-  } as data"
->
-  @if (data.formGroup && data.confirmationStates) {
-    <form [formGroup]="data.formGroup" (ngSubmit)="onSubmit()">
+<div class="bkd-container bkd-container-limited">
+  @if (formGroup && confirmationStates) {
+    <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
       @for (error of formErrors$ | async; track error) {
         <div class="alert alert-danger">
           {{
@@ -17,7 +14,7 @@ <h1>{{ "edit-absences.title" | translate }}</h1>
         </div>
       }
       <div class="form-group pb-4">
-        @for (category of data.categories; track category) {
+        @for (category of categories; track category) {
           <div class="form-check mt-2 mb-3">
             <input
               type="radio"
@@ -32,7 +29,7 @@ <h1>{{ "edit-absences.title" | translate }}</h1>
             @if (isAbsent(category)) {
               <div class="ms-5">
                 @for (
-                  confirmationState of data.confirmationStates;
+                  confirmationState of confirmationStates;
                   track confirmationState.Key
                 ) {
                   <div class="form-check mt-2 mb-2">

src/app/edit-absences/components/edit-absences-edit/edit-absences-edit.component.ts

@@ -34,7 +34,6 @@ import {
   getValidationErrors,
 } from "src/app/shared/utils/form";
 import { parseQueryString } from "src/app/shared/utils/url";
-import { LetDirective } from "../../../shared/directives/let.directive";
 import { ToastService } from "../../../shared/services/toast.service";
 import { EditAbsencesStateService } from "../../services/edit-absences-state.service";
 import {
@@ -48,13 +47,7 @@ import {
   styleUrls: ["./edit-absences-edit.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    LetDirective,
-    FormsModule,
-    ReactiveFormsModule,
-    AsyncPipe,
-    TranslateModule,
-  ],
+  imports: [FormsModule, ReactiveFormsModule, AsyncPipe, TranslateModule],
 })
 export class EditAbsencesEditComponent implements OnInit, OnDestroy {
   absenceTypes$ = this.presenceTypesService.confirmationTypes$;