Scribd
Upload
6 views

Angular

about angular

Uploaded by

utkarsha296
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views

Angular

about angular

Uploaded by

utkarsha296
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<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">
&nbsp;<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']);
}
}
}

You might also like