Topic: Conditional Nav/intro

steveweller pro asked 6 years ago


Hi, I am trying to get the "Full Page Intro with fixed, transparent Navbar" example working with my application. What i want is the intro to appear on the homepage, but not anywhere else. My main app.html looks like this:
<header class="h-100">
  <app-main-nav></app-main-nav>
  <app-intro></app-intro>
</header>
<body class="indigo-skin">
  <main class="mx-xl-5">
    <div class="container-fluid">
      <div class="d-flex flex-row mt-5 pt-5">
        <div class="col text-center">
          <router-outlet></router-outlet>
        </div>
      </div>
    </div>
  </main>
  <app-main-footer></app-main-footer>
</body>
where app-intro has the "view" div and the text to overlay on the view. This produces the effect that I want, but obviously appears on every page. How can I modify this to not show the view on every page?

steveweller pro commented 6 years ago

Additionally, since the styles for the transparent navBar seem to need to be in the global styles.scss, how do I revert back to a themed NavBar for the other pages?

steveweller pro answered 6 years ago


Solution (in case this helps others): Added Router component to constructors of <app-intro> and <app-main-nav>:
constructor(private router: Router) { }

In the html for the intro, wrap in an ngIf:
<div *ngIf="router.url === '/home'" ...

In the html of the nav-bar, adjust the style.
<mdb-navbar [ngClass]="router.url === '/home' ? '' : 'cyan-skin'" SideClass="..



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Laptop
  • Browser: Chrome
  • OS: WIndows 10
  • Provided sample code: No
  • Provided link: No