upgrade to standalone components

Author: jhades

src/app/about/about.component.ts

@@ -21,7 +21,8 @@ import {delayWhen, filter, map, take, timeout} from 'rxjs/operators';
 @Component({
     selector: 'about',
     templateUrl: './about.component.html',
-    styleUrls: ['./about.component.css']
+    styleUrls: ['./about.component.css'],
+    standalone: true
 })
 export class AboutComponent implements OnInit {
 

src/app/app.module.ts

@@ -35,42 +35,40 @@ import {AboutComponent} from './about/about.component';
 
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    HomeComponent,
-    CourseComponent,
-    CoursesCardListComponent,
-    CourseDialogComponent,
-    AboutComponent,
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    MatMenuModule,
-    MatButtonModule,
-    MatIconModule,
-    MatCardModule,
-    MatTabsModule,
-    MatSidenavModule,
-    MatListModule,
-    MatToolbarModule,
-    MatInputModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatProgressSpinnerModule,
-    MatDialogModule,
-    AppRoutingModule,
-    MatSelectModule,
-    MatDatepickerModule,
-    ReactiveFormsModule,
-    HttpClientModule
-  ],
-  providers: [
-    CoursesService,
-    CourseResolver
-  ],
-  bootstrap: [AppComponent]
+    declarations: [AppComponent],
+    imports: [
+        BrowserModule,
+        BrowserAnimationsModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatIconModule,
+        MatCardModule,
+        MatTabsModule,
+        MatSidenavModule,
+        MatListModule,
+        MatToolbarModule,
+        MatInputModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatProgressSpinnerModule,
+        MatDialogModule,
+        AppRoutingModule,
+        MatSelectModule,
+        MatDatepickerModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        HomeComponent,
+        CourseComponent,
+        CoursesCardListComponent,
+        CourseDialogComponent,
+        AboutComponent
+    ],
+    providers: [
+        CoursesService,
+        CourseResolver
+    ],
+    bootstrap: [AppComponent]
 })
 export class AppModule {
 }

src/app/course-dialog/course-dialog.component.ts

@@ -1,12 +1,19 @@
 import {Component, Inject, OnInit, ViewEncapsulation} from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions } from "@angular/material/dialog";
 import {Course} from "../model/course";
-import {FormBuilder, Validators, FormGroup} from "@angular/forms";
+import { FormBuilder, Validators, FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 @Component({
     selector: 'course-dialog',
     templateUrl: './course-dialog.component.html',
-    styleUrls: ['./course-dialog.component.css']
+    styleUrls: ['./course-dialog.component.css'],
+    standalone: true,
+    imports: [MatDialogTitle, MatDialogContent, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatOptionModule, MatDialogActions, MatButtonModule]
 })
 export class CourseDialogComponent implements OnInit {
 

src/app/course/course.component.ts

@@ -2,19 +2,23 @@ import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/
 import {ActivatedRoute} from '@angular/router';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import {Course} from '../model/course';
 import {CoursesService} from '../services/courses.service';
 import {debounceTime, distinctUntilChanged, startWith, tap, delay} from 'rxjs/operators';
 import {merge, fromEvent} from 'rxjs';
 import {Lesson} from '../model/lesson';
 import {Meta, Title} from '@angular/platform-browser';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
 
 
 @Component({
     selector: 'course',
     templateUrl: './course.component.html',
-    styleUrls: ['./course.component.scss']
+    styleUrls: ['./course.component.scss'],
+    standalone: true,
+    imports: [NgIf, MatProgressSpinnerModule, MatTableModule]
 })
 export class CourseComponent implements OnInit {
 

src/app/courses-card-list/courses-card-list.component.ts

@@ -2,11 +2,17 @@ import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {Course} from "../model/course";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
 import {CourseDialogComponent} from "../course-dialog/course-dialog.component";
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { NgFor } from '@angular/common';
 
 @Component({
     selector: 'courses-card-list',
     templateUrl: './courses-card-list.component.html',
-    styleUrls: ['./courses-card-list.component.scss']
+    styleUrls: ['./courses-card-list.component.scss'],
+    standalone: true,
+    imports: [NgFor, MatCardModule, MatButtonModule, RouterLink]
 })
 export class CoursesCardListComponent implements OnInit {
 

src/app/home/home.component.ts

@@ -3,11 +3,16 @@ import {Course} from "../model/course";
 import {Observable} from "rxjs";
 import {CoursesService} from "../services/courses.service";
 import {map, tap} from 'rxjs/operators';
+import { AsyncPipe } from '@angular/common';
+import { CoursesCardListComponent } from '../courses-card-list/courses-card-list.component';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @Component({
     selector: 'home',
     templateUrl: './home.component.html',
-    styleUrls: ['./home.component.scss']
+    styleUrls: ['./home.component.scss'],
+    standalone: true,
+    imports: [MatTabsModule, CoursesCardListComponent, AsyncPipe]
 })
 export class HomeComponent implements OnInit {