src/app/app-navigation/app-navigation.component.ts
| selector | app-navigation |
| styleUrls | app-navigation.component.css |
| templateUrl | ./app-navigation.component.html |
Methods |
constructor(materialService: MaterialService)
|
||||||
|
Initializes component. An IMaterialService must be provided so the material tabs can be rendered properly.
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Component lifecycle event that is used to render the material lite components that are used in the view.
Returns :
void
|
import { Component, OnInit } from '@angular/core';
import { MaterialService } from '../services';
@Component({
selector: 'app-navigation',
templateUrl: './app-navigation.component.html',
styleUrls: ['./app-navigation.component.css']
})
export class AppNavigationComponent implements OnInit {
/**
* Initializes component.
* An IMaterialService must be provided so the material tabs can be rendered properly.
* @param materialService
*/
constructor(private materialService: MaterialService) {}
/**
* Component lifecycle event that is used to render the material lite components that are used in the view.
*/
ngOnInit() {
console.log('app-navigation component loaded');
this.materialService.render();
}
}
<div class="mdl-tabs">
<div class="mdl-tabs__tab-bar">
<span routerLinkActive="active" class="mdl-tabs__tab">
<a id="sendMoneyTab" [routerLink]="['/start']" class="mdl-tabs__tab">Send Money</a>
<a [routerLink]="['/creating-sw']" style="display: none;"></a>
<a [routerLink]="['/payment/create']" style="display: none;"></a>
<a [routerLink]="['/success-screen']" style="display: none;"></a>
<a [routerLink]="['/authenticate-method']" style="display: none;"></a>
<a [routerLink]="['/authenticate-input']" style="display: none;"></a>
</span>
<a id="recipientsTab" [routerLink]="['/recipients']" class="mdl-tabs__tab" routerLinkActive="active">Recipients</a>
<a id="viewPaymentsTab" [routerLink]="['/payments']" class="mdl-tabs__tab" routerLinkActive="active">View Payments</a>
</div>
</div>