src/lib/loading/loading.component.ts
OnInit
OnDestroy
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | rxap-auth-loading |
| imports |
MatProgressBarModule
|
| styleUrls | ./loading.component.scss |
| templateUrl | ./loading.component.html |
Properties |
|
constructor(authentication: RxapAuthenticationService, router: Router)
|
|||||||||
|
Defined in src/lib/loading/loading.component.ts:25
|
|||||||||
|
Parameters :
|
| Public Readonly authentication |
Type : RxapAuthenticationService
|
Decorators :
@Inject(RxapAuthenticationService)
|
|
Defined in src/lib/loading/loading.component.ts:29
|
| Public Readonly router |
Type : Router
|
Decorators :
@Inject(Router)
|
|
Defined in src/lib/loading/loading.component.ts:31
|
| Public Optional subscription |
Type : Subscription
|
|
Defined in src/lib/loading/loading.component.ts:25
|
import {
ChangeDetectionStrategy,
Component,
Inject,
OnDestroy,
OnInit,
} from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { Router } from '@angular/router';
import { RxapAuthenticationService } from '@rxap/authentication';
import { Subscription } from 'rxjs';
import {
filter,
tap,
} from 'rxjs/operators';
@Component({
selector: 'rxap-auth-loading',
templateUrl: './loading.component.html',
styleUrls: ['./loading.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [MatProgressBarModule]
})
export class LoadingComponent implements OnInit, OnDestroy {
public subscription?: Subscription;
constructor(
@Inject(RxapAuthenticationService)
public readonly authentication: RxapAuthenticationService,
@Inject(Router)
public readonly router: Router,
) {
}
public ngOnInit(): void {
// TODO : remove the concept of isAuthenticated$
if (this.authentication.isAuthenticated$) {
this.subscription = this.authentication.isAuthenticated$
.pipe(
filter((isAuthenticated) => isAuthenticated !== null),
tap(() => this.router.navigate([ '/', 'authentication', 'login' ])),
)
.subscribe();
}
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
}
}
<mat-progress-bar class="loading-bar" mode="indeterminate"></mat-progress-bar>
./loading.component.scss
.loading-bar {
position: absolute;
bottom: 65vh;
left: 0;
right: 0;
top: auto;
}