src/app/header/header.component.ts
selector | app-header |
styleUrls | ./header.component.scss |
templateUrl | ./header.component.html |
Properties |
Methods |
|
constructor(dataService: ApiService)
|
||||||
Defined in src/app/header/header.component.ts:10
|
||||||
Parameters :
|
Private changeState | ||||||
changeState(state: boolean)
|
||||||
Defined in src/app/header/header.component.ts:20
|
||||||
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/header/header.component.ts:15
|
Returns :
void
|
loggedIn |
Type : boolean
|
Defined in src/app/header/header.component.ts:10
|
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);
}
}
}