src/app/components/navbar/navbar.component.ts
Un comentario
| selector | blog-navbar |
| styleUrls | ./navbar.component.css |
| templateUrl | ./navbar.component.html |
import { Component } from '@angular/core';
/**
* Un comentario
*/
@Component({
selector: 'blog-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
}
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" [routerLink]="['/home']" routerLinkActive="active">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/home']" routerLinkActive="active" >Home</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/about']" routerLinkActive="active">About</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/portfolio']" routerLinkActive="active">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/post']" routerLinkActive="active">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/contact']" routerLinkActive="active">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
./navbar.component.css
.nav-link.active {
font-weight: bold;
text-decoration: underline;
}