Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (global navigation and footer setup in angular 8 project) Part 10
Global Navigation and footer setup in angular 8 project
In this tutorial we will make project global navigation and footer section
bootstrap 4 Navbar
--------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
--------------------------------------------------------------------------
app.component.html
--------------------------------------------------------------------------
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
<div class="container">
<a class="navbar-brand" href="#">HMS</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Room Booking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Feedback</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="page_container">
<router-outlet></router-outlet>
</div>
<div class="footer">
</div>
--------------------------------------------------------------------------
app.component.css
--------------------------------------------------------------------------
.footer {
width: 100%;
height: 50px;
background: #343a40;
}
.page_container {
width: 100%;
margin-top: 41px;
margin-bottom: 52px;
}
--------------------------------------------------------------------------
