File

src/app/header/header.component.ts

Implements

OnInit

Metadata

selector app-header
styleUrls ./header.component.scss
templateUrl ./header.component.html

Index

Properties
Methods

Constructor

constructor(dataService: ApiService)
Parameters :
Name Type Optional
dataService ApiService No

Methods

Private changeState
changeState(state: boolean)
Parameters :
Name Type Optional
state boolean No
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

loggedIn
Type : boolean
import {Component, OnInit} from '@angular/core';
import {ApiService} from '../api.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  loggedIn: boolean;

  constructor(private dataService: ApiService) {
  }

  ngOnInit(): void {
    this.dataService.getLoggedInState.subscribe(state => this.changeState(state));
    this.loggedIn = this.dataService.isLoggedIn();
  }

  private changeState(state: boolean): void {
    this.loggedIn = state;
  }

}
<nav>
  <a *ngIf="!loggedIn" routerLink="/register" routerLinkActive="active">Register</a>
  <a *ngIf="!loggedIn" routerLink="/login" routerLinkActive="active">Login</a>
  <a *ngIf="loggedIn" routerLink="/home" routerLinkActive="active">Home</a>
  <a *ngIf="loggedIn" routerLink="/arena" routerLinkActive="active">Arena</a>
  <a *ngIf="loggedIn" routerLink="/files" routerLinkActive="active">Files</a>
  <a *ngIf="loggedIn" routerLink="/user" routerLinkActive="active">User</a>
</nav>

./header.component.scss

nav {
  display: flex;
  justify-content: center;
  background: var(--mix);
  border-bottom: 1px solid var(--color);
  user-select: none;

  a {
    display: block;
    color: var(--color);
    text-decoration: none;
    font-size: 1.1em;
    padding: 10px 20px;
    margin: 10px;
    transition: all 0.25s;

    &:hover {
      background: var(--dark);
    }

    &.active {
      background: var(--dark);
      border-bottom: 1px solid var(--color);
    }
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""