<div>
<!-- Header with two social icons on the left and a login button on the right
-->
<nav class='navbar navbar-default navbar-fixed-top'>
<div class='container-fluid'>
<ul class="social-network social-circle iconpos">
<li><a href="#" class="icoFacebook" title="Facebook"><i
class="fa fa-facebook fa-1x"></i></a></li>
<li class="divider-vertical"></li>
<li><a href="#" class="icoTwitter" title="Twitter"><i
class="fa fa-twitter fa-1x"></i></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="panel-heading text-right"
style="display:none;padding:0px;position:relative;top:15px;" #welcomeEl></div></li>
<li class="divider-vertical"></li>
<li>
<div class="btn-nav" style="padding-right:15px">
<a class="btn btn-primary btn-small
navbar-btn" (click)="login()" #loginEl>{{loginTitle}}</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Loads the component based on the route path -->
<router-outlet></router-outlet>
</div>
import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from
'@angular/core';
import { Router } from '@angular/router';
import { LoginService } from './login/login.service';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent implements AfterViewInit {
loginTitle = 'Login';
userName = '';
welcomeMessage = '';
@ViewChild('loginEl')
loginVal!: ElementRef;
@ViewChild('welcomeEl')
welcomeVal!: ElementRef;
constructor(private loginService: LoginService, private router: Router, private
renderer: Renderer2) {
}
ngOnInit(){}
ngAfterViewInit() {
this.userName = this.loginService.username;
this.loginService.loginElement = this.loginVal;
this.loginService.welcomeElement = this.welcomeVal;
}
// Invoked when user clicks on login button
// Navigates to login page
login() {
const value = this.loginVal.nativeElement.innerText;
this.loginTitle='';
if (value === 'Login') {
this.router.navigate(['/login']);
} else if (value === 'Logout') {
sessionStorage.clear();
this.loginTitle = 'Login';
this.renderer.setProperty(this.loginVal.nativeElement, 'innerText',
'Login');
this.renderer.setStyle(this.welcomeVal.nativeElement, 'display',
'none');
this.router.navigate(['/welcome']);
}
}
}
