Angular standalone sample updates (#7547)

This PR:

- Removes unused `CommonModule`
- Uses `styleUrl` instead of `styleUrls`
- Uses `inject` for DI
- Uses `takeUntilDestroyed` instead of `Subject/OnDestroy` approach
- Fixes indents

There is a typing issue, which is now solved by a generic in the
following line:
```ts
private msalGuardConfig = inject<MsalGuardConfiguration>(MSAL_GUARD_CONFIG);
```
I found a fix in the next PR:
#7484
After its merge, the generic can be removed:
```ts
private msalGuardConfig = inject(MSAL_GUARD_CONFIG);
```

Author: Eugeno

samples/msal-angular-samples/angular-standalone-sample/src/app/app.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, DestroyRef, inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -19,38 +19,34 @@ import {
   EventMessage,
   EventType,
 } from '@azure/msal-browser';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { filter } from 'rxjs/operators';
 
 @Component({
-    selector: 'app-root',
-    templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css'],
-    imports: [
-        CommonModule,
-        MsalModule,
-        RouterOutlet,
-        RouterLink,
-        MatToolbarModule,
-        MatButtonModule,
-        MatMenuModule,
-    ]
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  imports: [
+    MsalModule,
+    RouterOutlet,
+    RouterLink,
+    MatToolbarModule,
+    MatButtonModule,
+    MatMenuModule,
+  ]
 })
-export class AppComponent implements OnInit, OnDestroy {
+export class AppComponent implements OnInit {
+  private destroyRef = inject(DestroyRef);
+  private msalGuardConfig = inject<MsalGuardConfiguration>(MSAL_GUARD_CONFIG);
+  private authService = inject(MsalService);
+  private msalBroadcastService = inject(MsalBroadcastService);
+
   title = 'Angular Standalone Sample - MSAL Angular';
   isIframe = false;
   loginDisplay = false;
-  private readonly _destroying$ = new Subject<void>();
-
-  constructor(
-    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
-    private authService: MsalService,
-    private msalBroadcastService: MsalBroadcastService
-  ) {}
 
   ngOnInit(): void {
     this.authService.handleRedirectObservable().subscribe();
-    
+
     this.isIframe = window !== window.parent && !window.opener; // Remove this line to use Angular Universal
 
     this.msalBroadcastService.msalSubject$
@@ -74,7 +70,7 @@ export class AppComponent implements OnInit, OnDestroy {
         filter(
           (status: InteractionStatus) => status === InteractionStatus.None
         ),
-        takeUntil(this._destroying$)
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(() => {
         this.setLoginDisplay();
@@ -138,9 +134,4 @@ export class AppComponent implements OnInit, OnDestroy {
       this.authService.logoutRedirect();
     }
   }
-
-  ngOnDestroy(): void {
-    this._destroying$.next(undefined);
-    this._destroying$.complete();
-  }
 }