File

src/lib/loading/loading.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties

Constructor

constructor(authentication: RxapAuthenticationService, router: Router)
Parameters :
Name Type Optional
authentication RxapAuthenticationService No
router Router No

Properties

Public Readonly authentication
Type : RxapAuthenticationService
Decorators :
@Inject(RxapAuthenticationService)
Public Readonly router
Type : Router
Decorators :
@Inject(Router)
Public Optional subscription
Type : Subscription
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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""