src/app/layout/header/profile-dropdown/profile-dropdown.component.ts
selector | app-profile-dropdown |
styleUrls | profile-dropdown.component.scss |
templateUrl | ./profile-dropdown.component.html |
isAuthenticated
|
Type: |
totalCartItems
|
Type: |
constructor(authService: AuthService)
|
ngOnInit |
ngOnInit()
|
Returns:
void
|
logout |
logout()
|
Returns:
void
|
import { Component, OnInit, Input } from '@angular/core';
import { AuthService } from '../../../core/services/auth.service';
@Component({
selector: 'app-profile-dropdown',
templateUrl: './profile-dropdown.component.html',
styleUrls: ['./profile-dropdown.component.scss']
})
export class ProfileDropdownComponent implements OnInit {
@Input() isAuthenticated: boolean;
@Input() totalCartItems: number;
constructor(
private authService: AuthService
) { }
ngOnInit() {
}
logout() {
this.authService.logout().subscribe(
data => console.log(data)
);
}
}
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" dropdown>
<a href="#" class="dropdown-toggle" dropdownToggle>
<i class="fa fa-user" aria-hidden="true"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" dropdownMenu *ngIf="!isAuthenticated; else elseBlock">
<li><a [routerLink]="['/auth']">Sign Up</a></li>
<li role="separator" class="divider"></li>
<li><a [routerLink]="['/auth', 'login']">Login</a></li>
</ul>
<ng-template #elseBlock>
<ul class="dropdown-menu" dropdownMenu>
<li><a routerLink="/user">My Profile</a></li>
<li><a routerLink="/user/orders">My Orders</a></li>
<li role="separator" class="divider"></li>
<li><a routerLink="/user/addresses">Saved Addresses</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Edit Profile</a></li>
<li><a (click)="logout()">Logout</a></li>
</ul>
</ng-template>
</li>
<li class="cart" [routerLink]="['checkout','cart']">
<a>
<i class="fa fa-shopping-bag" aria-hidden="true"></i> Bag
<span class="badge badge-danger">{{totalCartItems}}</span></a>
</li>
</ul>