### File

`src/app/header/header.component.ts`

### Implements

`OnInit`

### Metadata

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

### Index

###### Properties

- loggedIn

###### Methods

- Private changeState
- ngOnInit

### Constructor

`constructor(dataService: ApiService)`
Defined in src/app/header/header.component.ts:10

Parameters :

Name | Type | Optional
dataService | `ApiService` | No

### Methods

Private changeState
`changeState(state: boolean)`
Defined in src/app/header/header.component.ts:20

Parameters :

Name | Type | Optional
state | `boolean` | No

Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/header/header.component.ts:15
Returns : `void`

### Properties

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);
        }
      }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""