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;
}

--------------------------------------------------------------------------

Tutorial Topics