Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular standalone sample updates #7547

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Angular standalone sample updates #7547

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba022fd
Update angular-standalone-sample
Eugeno Jan 31, 2025
a804403
Merge branch 'dev' into angular-sample
Eugeno Feb 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 22 additions & 31 deletions samples/msal-angular-samples/angular-standalone-sample/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window
Expand All @@ -75,7 +71,7 @@ export class AppComponent implements OnInit, OnDestroy {
filter(
(status: InteractionStatus) => status === InteractionStatus.None
),
takeUntil(this._destroying$)
takeUntilDestroyed(this.destroyRef)
)
.subscribe(() => {
this.setLoginDisplay();
Expand Down Expand Up @@ -139,9 +135,4 @@ export class AppComponent implements OnInit, OnDestroy {
this.authService.logoutRedirect();
}
}

ngOnDestroy(): void {
this._destroying$.next(undefined);
this._destroying$.complete();
}
}