<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/[Link]';
@Component({
selector: 'app-root',
templateUrl: '[Link]',
styleUrls: ['[Link]']
})
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() {
[Link] = [Link];
[Link] = [Link];
[Link] = [Link];
}
// Invoked when user clicks on login button
// Navigates to login page
login() {
const value = [Link];
[Link]='';
if (value === 'Login') {
[Link](['/login']);
} else if (value === 'Logout') {
[Link]();
[Link] = 'Login';
[Link]([Link], 'innerText',
'Login');
[Link]([Link], 'display',
'none');
[Link](['/welcome']);
}
}
}