Vfrdtyky

@Component({

  selector: 'app-home',

  templateUrl: './home.component.html',

  styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit {

  private spinnerSubject = new BehaviorSubject<boolean> (false);

  loading$: Observable<boolean> = this.spinnerSubject.asObservable();

  spinnerColor = 'warn';



  constructor(

    private router: Router,

    private activatedRoute: ActivatedRoute) {

    

      activatedRoute.url.subscribe((s: UrlSegment) => {



    });

  }



  ngOnInit() {



  }



  appCardClicked(routePath: string) {

    this.spinnerSubject.next(true);

    this.router.navigate([routePath], {

      replaceUrl: true

    });

    // this.spinnerSubject.next(false);

  }

}

<div class="spinner-container">

  <mat-spinner [color]="spinnerColor" *ngIf="loading$ | async"></mat-spinner>

</div>



<mat-card class="app-card" (click)="appCardClicked('/lccp')">

  <mat-card-content>

    <p>

      A summary goes here.

    </p>

  </mat-card-content>

  <mat-card-actions>

    <button mat-button>LIKE</button>

    <button mat-button>SHARE</button>

  </mat-card-actions>

</mat-card>

@Component({

  // tslint:disable-next-line:component-selector

  selector: 'vertical-nav',

  templateUrl: './nav.component.html',

  styleUrls: ['./nav.component.css']

})

export class NavComponent implements OnInit, AfterViewInit, AfterContentInit {

  private spinnerSubject = new BehaviorSubject<boolean>(false); 

  loading$: Observable<boolean> = this.spinnerSubject.asObservable();



  routerLinkClicked(): void {

    this.spinnerSubject.next(true);

  }



  ngAfterContentInit(): void {

    this.spinnerSubject.next(false);

  }

}

<mat-sidenav-container class="sidenav-container">

  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="menuIsOpened || (isHandset$ | async)">

    <mat-toolbar class="darkNavy">

      <img src="assets/logo.gif" routerLink="/home" style="padding-top:40px" alt="logo" />

    </mat-toolbar>

    <mat-nav-list style="padding-top:50px">

      <a *ngFor="let item of verticleMenu" mat-list-item routerLink="{{item.RouteLink}}" (click)="routerLinkClicked()">

        {{item.Title}}

      </a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-sidenav-content>

    <mat-toolbar class="darkNavy">

      <mat-nav-list>

        <div class='menu' style="display:flex; align-items: flex-end">

          <i class="material-icons" aria-label="Side nav toggle icon" (click)="toggleMenu()" matTooltip="menu">menu



          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          </i>

          <span *ngFor="let item of horizontalMenu" mat-list-item routerLink="{{item.RouteLink}}">&nbsp;

            {{item.Title}}

          </span>

        </div>

      </mat-nav-list>

    </mat-toolbar>



    <ng-content>

      <!-- routed content is projected here -->

    </ng-content>

    <div class="spinner-container" *ngIf="loading$ | async" role="presentation">

      <mat-spinner [color]="spinnerColor"></mat-spinner>

    </div>

  </mat-sidenav-content>

</mat-sidenav-container>