Topic: Conditional Nav/intro
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?
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="..
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
steveweller pro commented 5 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?