how to show current center name of admin on header

Question

hi in my project the admin registers account with center name what i want is as they login and see the admin page on the header i need to show the center name that they register for the current logged in admin but i have no idea how to do it. this project is done using angular mean stack

admin.js '''

const mongoose = require('mongoose');
const uniqueValidator = require('mongoose-unique-validator');


const adminSchema = mongoose.Schema({
  username: {type: String, required: true, unique: true},
  password: {type: String, required: true},
  fullname: {type: String, required: true},
  email: {type: String, required: true},
  staffid: {type: String, required: true, unique: true},
  cname: {type: String, required: true},
  role : {type: String, required: true},

});
adminSchema.plugin(uniqueValidator);

module.exports = mongoose.model('Admin', adminSchema);

'''

signup.component.html

'''

<app-header></app-header>
<mat-card>
  <form (submit)="onSignup(signupForm)" #signupForm = "ngForm">
  <mat-form-field>
    <input
      matInput
      name="username"
      type="text"
      placeholder="Username"
      #usernameInput = "ngModel"
      ngModel
      required
      username>

    <mat-error *ngIf = "usernameInput.invalid">Please enter a valid username</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input
    name="password"
      type="password"
      matInput
      placeholder="Password"
      ngModel
      #passwordInput = "ngModel"
      required>
    <mat-error *ngIf = "passwordInput.invalid">Please enter a valid password</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input
    name="fullname"
      type="text"
      matInput
      placeholder="Full Name"
      ngModel
      #fullnameInput = "ngModel"
      required>
    <mat-error *ngIf = "fullnameInput.invalid">Please enter a valid Name</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input
    name="email"
      type="email"
      matInput
      placeholder="E-mail"
      ngModel
      #emailInput = "ngModel"
      required>
    <mat-error *ngIf = "emailInput.invalid">Please enter a valid email</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input
    name="staffid"
      type="text"
      matInput
      placeholder="Staff Id"
      ngModel
      #staffidInput = "ngModel"
      required>
    <mat-error *ngIf = "staffidInput.invalid">Please enter a valid staffid</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input
    name="cname"
      type="text"
      matInput
      placeholder="Center name"
      ngModel
      #cnameInput = "ngModel"
      required>
    <mat-error *ngIf = "cnameInput.invalid">Please enter a center name</mat-error>
  </mat-form-field>


  <button
  mat-raised-button
  color = "accent"
  type= "submit">Register</button>
</form>
<app-center-list></app-center-list>
<br><br>
<button
mat-raised-button
color = "accent" routerLink="/registerCenter" >Add center</button>
</mat-card>

'''

signup.component.ts '''

import { Component, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';
import { AuthService } from 'src/app/auth.service';
import { Post } from 'src/app/registration/posts.model';
import { PostsService } from "src/app/registration/posts.service";
import { Admin } from 'src/app/registration/admin.model';

import { Subscription } from "rxjs";


@Component({
  selector: 'app-auth',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']

})

export class SignupComponent {

  posts: Post[] = [];
private postsSub: Subscription | undefined;

  constructor(public authService: AuthService, public postsService: PostsService){}

  ngOnInit(){
    this.postsService.getPosts();
    this.postsSub = this.postsService.getPostsUpdateListener()
    .subscribe((posts: Post[])=>{
      this.posts = posts;
    });
  }
  onSignup(form: NgForm){
    if (form.invalid){
      return;
    }
    this.authService.createAdmin(form.value.username, form.value.password, form.value.fullname,
      form.value.email, form.value.staffid, form.value.cname);
  }
}
'''
(the post here is actually register center that i created to save center list which they can choose from).


vaccinePage.component.html (after login the user is redirected to this page. and this is the page where i want center name to be shown on the header)

'''

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>


  </mat-toolbar-row>


</mat-toolbar>


<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>

      <a mat-list-item [routerLink]="'/vaccines'"> Record Vaccine</a>
      <a mat-list-item [routerLink]="'/appointment'" > Appointments</a>
      <a mat-list-item [routerLink]="'/login'"> Log out </a>

    </mat-nav-list>
  </mat-sidenav>





<mat-card>
  <form (submit) = "onSubmit(vaccineForm)" #vaccineForm="ngForm">
  <mat-form-field>
    <input matInput type="text" name = "vaccinename" ngModel required minlength="3"
    #vaccinename="ngModel" placeholder="Vaccine Name">
    <mat-error *ngIf="vaccinename.invalid">Please enter center name</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" name = "manufacturer" ngModel required minlength="3"
    #manufacturer="ngModel" placeholder="Manufacturer">
    <mat-error *ngIf="manufacturer.invalid">Please enter manufacturer</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="text" name = "batchno" ngModel required minlength="3"
    #batchno="ngModel" placeholder="Batch No">
    <mat-error *ngIf="batchno.invalid">Please enter a batch number</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput type="date" name = "date" ngModel required minlength="3"
    #date="ngModel" placeholder="Expiry date">
    <mat-error *ngIf="date.invalid">Please enter date</mat-error>
  </mat-form-field>


<mat-form-field>
  <input matInput type="text" name = "dose" ngModel required minlength="3"
  #dose="ngModel" placeholder="Dose available">
  <mat-error *ngIf="dose.invalid">Please enter center address</mat-error>
  </mat-form-field>



<button mat-raised-button color="primary"
type="submit">Submit</button>
</form>
</mat-card>
<app-vaccine-list></app-vaccine-list>

'''

Answer 1

One way to achieve what you want is using router events, get the current URL inside your header component and check the validation that if current route is for admin page (as you said once logged in user will navigate to admin page) then fetch the center name from db or from wherever you are storing bind it and show on header page.

import { Router,Event as NavigationEvent, NavigationStart} from '@angular/router';

inside Class
//declare variables
currentRoute: any;
event$: any 

constructor(public route: Router){
this.event$ = this.route.events.subscribe((event: NavigationEvent) => {
      if (event instanceof NavigationStart) {
        this.currentRoute = event.url;
        console.log("this.currentRoute",this.currentRoute);
        //check your condition here and do the stuff as needed
      }
    });
}