I've been working on implementing a dynamic navbar using Angular's Material design, but for some reason, I can't seem to get it to display correctly. Can anyone take a look at my code and help me identify where I might be going wrong? Here's a screenshot for reference: http://prntscr.com/fv9l2i
navBar.comp.html:
<nav md-tab-nav-bar>
<a md-tab-link
*ngFor="let link of navLinks"
[routerLink]="navLinks.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{navLinks.label}}
</a>
</nav>
<router-outlet></router-outlet>
Current Area:
Fun <md-slide-toggle
class="example-margin"
[color]="color"
[checked]="checked"
(change)="onChange($event)">Information</md-slide-toggle>
navBar.comp.ts
import { Component, OnInit, Injectable } from '@angular/core';
import { Router } from '@angular/router';
@Injectable()
@Component({
selector: 'nav-Bar',
templateUrl: 'navBar.component.html'
})
export class NavBarComponent implements OnInit {
// component logic goes here
}
app.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/index';
import { HomeComponent } from './home/index';
import { ProfileComponent } from './profile/index';
import { CreatePostComponent } from './createPost/index';
import { UserPostsComponent } from './userposts/index';
import { RegisterComponent } from './register/index';
import { NotificationComponent } from './notification/index';
import { NavBarComponent } from './navBar/index';
import { AuthGuard } from './_guards/index';
const appRoutes: Routes = [
// define routes here
];
export const routing = RouterModule.forRoot(appRoutes);