refactor(HeaderComponent): Convert to standalone (#1818)

src/app/app.component.html

@@ -9,7 +9,7 @@
       [announcement]="announcement"
       (dismiss)="dismissAnnouncement()"
     ></app-announcement>
-    <app-header *ngIf="showHeaderAndFooter" class="dark-theme top-content"></app-header>
+    <app-header *ngIf="showHeaderAndFooter" class="dark-theme top-content" />
     <div fxFlex>
       <router-outlet></router-outlet>
     </div>

src/app/app.module.ts

@@ -12,7 +12,6 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { ConfigService } from './services/config.service';
-import { HeaderModule } from './modules/header/header.module';
 import { HomeModule } from './home/home.module';
 import { StudentService } from './student/student.service';
 import { UserService } from './services/user.service';
@@ -24,6 +23,7 @@ import { TrackScrollDirective } from './track-scroll.directive';
 import { RecaptchaV3Module, RECAPTCHA_V3_SITE_KEY, RECAPTCHA_BASE_URL } from 'ng-recaptcha';
 import { ArchiveProjectService } from './services/archive-project.service';
 import { FooterComponent } from './modules/footer/footer.component';
+import { HeaderComponent } from './modules/header/header.component';
 
 export function initialize(
   configService: ConfigService,
@@ -56,7 +56,7 @@ export function initialize(
     HttpClientModule,
     AppRoutingModule,
     FooterComponent,
-    HeaderModule,
+    HeaderComponent,
     HomeModule,
     MobileMenuComponent,
     MatSidenavModule,

src/app/modules/header/header.component.html

@@ -14,18 +14,21 @@
         </picture>
       </a>
       <span fxFlex="1 1 auto"></span>
-      <app-header-links fxHide fxShow.gt-sm [user]="user" [location]="location"></app-header-links>
-      <app-header-account-menu *ngIf="roles.length > 0" [user]="user"></app-header-account-menu>
-      <button
-        *ngIf="!location"
-        mat-icon-button
-        fxHide.gt-sm
-        (click)="showMobileMenu()"
-        i18n-aria-label
-        aria-label="Main menu"
-      >
-        <mat-icon>menu</mat-icon>
-      </button>
+      <app-header-links fxHide fxShow.gt-sm [user]="user" [location]="location" />
+      @if (roles.length > 0) {
+        <app-header-account-menu [user]="user" />
+      }
+      @if (!location) {
+        <button
+          mat-icon-button
+          fxHide.gt-sm
+          (click)="showMobileMenu()"
+          i18n-aria-label
+          aria-label="Main menu"
+        >
+          <mat-icon>menu</mat-icon>
+        </button>
+      }
     </div>
   </mat-toolbar>
 </header>

src/app/modules/header/header.component.spec.ts

@@ -1,19 +1,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HeaderComponent } from './header.component';
-import { Component, Input } from '@angular/core';
 import { User } from '../../domain/user';
-import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Observable } from 'rxjs';
 import { ConfigService } from '../../services/config.service';
 import { UserService } from '../../services/user.service';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Config } from '../../domain/config';
 import { UtilService } from '../../services/util.service';
+import { provideRouter } from '@angular/router';
 
 export class MockUserService {
   getUser(): Observable<User> {
-    return Observable.create((observer) => {
+    return new Observable((observer) => {
       const user: User = new User();
       observer.next(user);
       observer.complete();
@@ -32,35 +30,30 @@ export class MockConfigService {
       logOutURL: '/logout',
       currentTime: new Date('2018-10-17T00:00:00.0').getTime()
     };
-    return Observable.create((observer) => {
+    return new Observable((observer) => {
       observer.next(config);
       observer.complete();
     });
   }
 }
 
-@Component({ selector: 'app-header-account-menu', template: '' })
-class HeaderAccountMenuStubComponent {
-  @Input()
-  user: User;
-}
-
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
   let fixture: ComponentFixture<HeaderComponent>;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule],
-      declarations: [HeaderComponent],
-      providers: [
-        { provide: UserService, useClass: MockUserService },
-        { provide: ConfigService, useClass: MockConfigService },
-        { provide: UtilService, useClass: MockUtilService }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        imports: [HeaderComponent, HttpClientTestingModule],
+        providers: [
+          provideRouter([]),
+          { provide: UserService, useClass: MockUserService },
+          { provide: ConfigService, useClass: MockConfigService },
+          { provide: UtilService, useClass: MockUtilService }
+        ]
+      }).compileComponents();
+    })
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(HeaderComponent);

src/app/modules/header/header.component.ts

@@ -1,56 +1,70 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, RouterModule } from '@angular/router';
 import { User } from '../../domain/user';
 import { UserService } from '../../services/user.service';
 import { UtilService } from '../../services/util.service';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { HeaderLinksComponent } from './header-links/header-links.component';
+import { HeaderAccountMenuComponent } from './header-account-menu/header-account-menu.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    HeaderAccountMenuComponent,
+    HeaderLinksComponent,
+    MatButtonModule,
+    MatIconModule,
+    MatToolbarModule,
+    RouterModule
+  ],
   selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+  standalone: true,
+  styleUrl: './header.component.scss',
+  templateUrl: './header.component.html'
 })
 export class HeaderComponent implements OnInit {
-  user: User;
-
-  location: string = ''; // current location
-  roles: string[] = [];
-  url: string = '';
+  protected location: string = '';
+  protected roles: string[] = [];
+  protected user: User;
 
   constructor(
     private router: Router,
     private userService: UserService,
     private utilService: UtilService
   ) {
-    this.router = router;
-    this.router.events.subscribe((event) => {
+    this.router.events.subscribe(() => {
       this.setLocation();
     });
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.getUser();
     this.setLocation();
   }
 
-  getUser() {
+  private getUser(): void {
     this.userService.getUser().subscribe((user) => {
       this.user = user;
       this.roles = user.roles ? user.roles : [];
     });
   }
 
-  setLocation() {
-    this.url = this.router.url;
-    if (this.url.match(/^\/teacher/)) {
+  private setLocation(): void {
+    if (this.router.url.match(/^\/teacher/)) {
       this.location = 'teacher';
-    } else if (this.url.match(/^\/student/)) {
+    } else if (this.router.url.match(/^\/student/)) {
       this.location = 'student';
     } else {
       this.location = '';
     }
   }
 
-  showMobileMenu() {
+  protected showMobileMenu(): void {
     this.utilService.showMobileMenu();
   }
 }

src/messages.xlf

@@ -5271,7 +5271,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Main menu</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/header/header.component.html</context>
-          <context context-type="linenumber">25</context>
+          <context context-type="linenumber">27</context>
         </context-group>
       </trans-unit>
       <trans-unit id="481add1796f59f7dfdcfb8e69283dd39230d67e9" datatype="html">