<!--Main Navigation-->

<header>

  <!-- Animated navbar-->

  <nav

    class="navbar navbar-expand-lg fixed-top navbar-scroll"

    [class.navbar-scrolled]="navbarScrolled"

  >

    <div class="container-fluid">

      <button

        class="navbar-toggler"

        type="button"

        (click)="animatedNavbarExample2.toggle()"

        aria-controls="animatedNavbarExample2"

        aria-expanded="false"

        aria-label="Toggle navigation"

      >

        <span class="navbar-toggler-icon d-flex justify-content-start align-items-center">

          <i class="fas fa-bars"></i>

        </span>

      </button>

      <div

        mdbCollapse

        #animatedNavbarExample2="mdbCollapse"

        class="collapse navbar-collapse"

        id="animatedNavbarExample2"

      >

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">

          <li class="nav-item active">

            <a class="nav-link" aria-current="page" href="#intro">Home</a>

          </li>

          <li class="nav-item">

            <a

              class="nav-link"

              href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"

              rel="nofollow"

              target="_blank"

              >Learn Bootstrap 5</a

            >

          </li>

          <li class="nav-item">

            <a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank"

              >Download MDB UI KIT</a

            >

          </li>

        </ul>

​

        <ul class="navbar-nav flex-row">

          <!-- Icons -->

          <li class="nav-item">

            <a

              class="nav-link pe-2"

              href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"

              rel="nofollow"

              target="_blank"

            >

              <i class="fab fa-youtube"></i>

            </a>

          </li>

          <li class="nav-item">

            <a

              class="nav-link px-2"

              href="https://www.facebook.com/mdbootstrap"

              rel="nofollow"

              target="_blank"

            >

              <i class="fab fa-facebook-f"></i>

            </a>

          </li>

          <li class="nav-item">

            <a

              class="nav-link px-2"

              href="https://twitter.com/MDBootstrap"

              rel="nofollow"

              target="_blank"

            >

              <i class="fab fa-twitter"></i>

            </a>

          </li>

          <li class="nav-item">

            <a

              class="nav-link ps-2"

              href="https://github.com/mdbootstrap/mdb-ui-kit"

              rel="nofollow"

              target="_blank"

            >

              <i class="fab fa-github"></i>

            </a>

          </li>

        </ul>

      </div>

    </div>

  </nav>

  <!-- Animated navbar -->

​

  <!-- Background image -->

  <div

    id="intro"

    class="bg-image"

    style="

      background-image: url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp);

      height: 100vh;

    "

  >

    <div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.8)">

      <div class="container d-flex align-items-center text-center h-100">

        <div>

          <h1 class="mb-5">This is title</h1>

          <p>

            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae laboriosam

            numquam expedita ullam saepe ipsam, deserunt provident corporis, sit non accusamus

            maxime, magni nulla quasi iste ipsa architecto? Autem!

          </p>

        </div>

      </div>

    </div>

  </div>

  <!-- Background image -->

</header>

<!--Main Navigation-->

​

<div class="container my-5">

  <p>

    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam minima perspiciatis eos

    tenetur. Praesentium dolores at quos aperiam sed, sint provident consectetur incidunt, nostrum

    porro earum commodi, ex architecto.

  </p>

</div>

​

​

import { Component, OnInit } from '@angular/core';

import { fromEvent } from 'rxjs';

​

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

  constructor() {}

​

  navbarScrolled = false;

​

  ngOnInit(): void {

    fromEvent(window, 'scroll').subscribe(() => {

      if (window.scrollY > 0) {

        this.navbarScrolled = true;

      } else {

        this.navbarScrolled = false;

      }

    });

  }

}