File

src/app/home/menu.component.ts

Implements

OnInit

Metadata

selector app-menu
styleUrls ./menu.component.less
templateUrl ./menu.component.html

Index

Properties
Methods
Accessors

Constructor

constructor(authService: AuthService, router: Router)
Parameters :
Name Type Optional
authService AuthService No
router Router No

Methods

logOut
logOut()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

pageTitle
pageTitle: string
Type : string
Default value : "PollApp"

Accessors

isLoggedIn
getisLoggedIn()
userName
getuserName()
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/user/auth.service';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.less']
})
export class MenuComponent implements OnInit {
  pageTitle="PollApp";

  constructor(private authService: AuthService, 
    private router: Router){} 
  
  ngOnInit() {    
  }

  //Getter property as we use it like  *ngIf="isLoggedIn">
  get isLoggedIn(): boolean{ 
    return this.authService.isLoggedIn();
  }

  get userName(): string {
    if (this.authService.currentUser) {
      return this.authService.currentUser.userName;
    }
    return '';
  }
  
  logOut(): void {
    this.authService.logout();
    this.router.navigate(['/welcome']);
  }
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">{{pageTitle}}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink='/welcome'> Home<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink='/polls'>Polls List</a>
      </li>      
      <li class="nav-item" routerLinkActive="active">
          <a class="nav-link" routerLink='/kycform'>Kyc-Poll Form</a>
        </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="">Action</a>
          <a class="dropdown-item" href="">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="">Disabled</a>
      </li>
    </ul>
<!-- For login-logout at right most corner -->
<ul class="navbar-nav navbar-right">
    <li class="nav-item" *ngIf="isLoggedIn">
      <a class="nav-link" routerLink='/login'>Welcome {{userName}}
      </a>
    </li>
    <li class="nav-item" *ngIf="!isLoggedIn" >
      <a class="nav-link" routerLink='/kycform/login'>Log In</a>
    </li>
    <li class="nav-item" *ngIf="isLoggedIn">
        <a class="nav-link" (click)="logOut()" style="cursor: pointer">Log Out</a>
    </li>
  </ul>
    <!--Due to Form parse err, converted to div,  <form novalidate class="form-inline my-2 my-lg-0"> 
    <div novalidate class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </div> -->
  </div>
</nav>

./menu.component.less

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""