### File

`src/lib/loading/loading.component.ts`

### Implements

`OnInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `rxap-auth-loading`
imports | `MatProgressBarModule`
styleUrls | `./loading.component.scss`
templateUrl | `./loading.component.html`

### Index

###### Properties

- Public Readonly authentication
- Public Readonly router
- Public Optional subscription

### Constructor

`constructor(authentication: RxapAuthenticationService, router: Router)`
Defined in src/lib/loading/loading.component.ts:25

Parameters :

Name | Type | Optional
authentication | `RxapAuthenticationService` | No
router | `Router` | No

### Properties

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;
    }

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""