todo-app documentation
  1. Components
  2. NavBarComponent

File

src/app/nav-bar/nav-bar.component.ts

Metadata

selector app-nav-bar
styleUrls ./nav-bar.component.css
templateUrl ./nav-bar.component.html

Index

Properties
Methods

Constructor

constructor(TodosService: TodosService, AuthService: AuthService)
Defined in src/app/nav-bar/nav-bar.component.ts:13
Parameters :
Name Type Optional
TodosService TodosService No
AuthService AuthService No

Methods

logout
logout()
Defined in src/app/nav-bar/nav-bar.component.ts:18
Returns : void

Properties

isLoggedIn
Type : BehaviorSubject<boolean>
Default value : this.AuthService.isAuthenticated$()
Defined in src/app/nav-bar/nav-bar.component.ts:16
user
Type : BehaviorSubject<User | null>
Default value : this.AuthService.LoggedUser$
Defined in src/app/nav-bar/nav-bar.component.ts:13
 
import { Component } from '@angular/core';
import { TodosService } from '../todos.service'
import { BehaviorSubject, Observable } from 'rxjs';
import { AuthService } from '../auth/auth.service'
import { User } from '../auth/user';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})
export class NavBarComponent {
  user:BehaviorSubject<User | null> = this.AuthService.LoggedUser$;

  constructor(private TodosService: TodosService, private AuthService: AuthService) { }
  isLoggedIn: BehaviorSubject<boolean> = this.AuthService.isAuthenticated$();

  logout(){
    this.AuthService.logout();
  }
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" routerLink="">Todos</a>
        <div class="navbar-nav ml-auto">
            <a class="nav-link disabled" *ngIf="!isLoggedIn.getValue()">Welcome to Todos</a>
            <a class="nav-link disabled" *ngIf="isLoggedIn.getValue()">Welcome {{(user | async)?.name}}</a>
            <a class="nav-link user-img" routerLink="/profile" *ngIf="isLoggedIn.getValue()">
                <img src="assets\images\user.webp" class="img-fluid rounded-circle" alt="User Image">
            </a>
            <button type="button" class="btn btn-primary px-3 me-2" *ngIf="!isLoggedIn.getValue()" routerLink="/login">
                Login
            </button>
            <button type="button" class="btn btn-primary" *ngIf="!isLoggedIn.getValue()" routerLink="/signin">Sign
                Up</button>
            <button type="button" class="btn btn-primary" *ngIf="isLoggedIn.getValue()" (click)="logout()">Log
                out</button>
        </div>
    </div>
</nav>

./nav-bar.component.css 

.navbar {
    border-bottom: 2px solid #f8b574;
    padding: 10px 50px;
}

.navbar-brand {
    font-weight: bold;
}

.nav-link {
    margin-right: 10px;
    transition: color 0.3s;
    display: flex;
    align-items: center
}

.navbar-nav .nav-link i {
    margin-right: 5px;
    font-size: 1.2rem;
}

.navbar-nav .nav-link .icon-label {
    font-size: 0.8rem;
    color: #fff;
    padding: 0px 5px;
    border-radius: 10px;
    position: relative;
    top: -3px;
    margin-left: 3px;
}

.user-img img {
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    cursor: pointer;
}

.user-img img:hover {
    border-color: #f5af19;
    box-shadow: 0 0 5px #f5af19;
}

.btn-primary {
    background-color: #f5af19;
    border-color: #f5af19;
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-link {
    text-decoration: none;
}

.btn {
    opacity: 0.6;
    background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
}

.navbar-nav {
    flex-direction: row;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""