How to implement Landing page into a material angular web application

Question

I have implemented a angular web application with material.

This web application has Side Navi and Routing

Codes ware as follows:

app.component.ts

<mat-sidenav-container class="mat-sidenav-container" autosize>
  <mat-sidenav mode="side" class="mat-sidenav" opened>
    <app-side-nav></app-side-nav>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="app-header">
      <app-header></app-header>
    </div>
    <div class="mat-sidenav-content">
      <main class="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
      </main>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

app-routing.module.ts

const routes: Routes = [
 {
    path: '',
    component: LandingPageComponent
  },
  {
    path: 'home',
    data: { bc: "NAVI.HOME" },
    children: [
      {
        path: '',
        component: HomeComponent,
        data: { bc: "" }
      }
    ]
  },
  {
    path: 'overview',
    component: OverviewComponent,
    data: { bc: "NAVI.OVERVIEW" }
  },
.....

I have tried:

<app-landing-page></app-landing-page>
<mat-sidenav-container class="mat-sidenav-container" autosize>
  <mat-sidenav mode="side" class="mat-sidenav" opened>
    <app-side-nav></app-side-nav>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="app-header">
      <app-header></app-header>
    </div>
    <div class="mat-sidenav-content">
      <main class="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
      </main>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

in landing page I added a button, if it is clicked, web app should be leaded to home with side navi and contents.

<p>
  landing-page works!
  <button (click)="navitohome()"></button>
</p>

in the landing-page.ts

 navitohome() {
    this.router.navigate(['home']);
  }

but this funcktion was not working

I have added the component landing page into app.component.html, but it was not working.

now I create a lading page component as usual, in this landing page exites a button odr , which leads to this web application (with side navi and the rest contents).

But I don't know, how should I change my code (app.component.ts or app-routing.module.ts)?

any solutions?

Best regards,

Leo

What specifically do you need help to do? E.g. do you want it to be the page where users arrive from a google search? Should it function as a fallback route if someone navigates to a page that doesn't exist? — Joakim, Mar 27 '19 at 11:36
e.g. I wannt to show the landing page first, if I load e.g. http://localhost:4200, and then If I click the button or a link in this landing page and then go to the site with side navi and contens — user1938143, Mar 27 '19 at 11:40
does [this](https://stackoverflow.com/questions/41684290/different-routes-for-landing-page-and-dashboard-in-angular2) help you? — Joakim, Mar 27 '19 at 11:45
in any case, I think the approach of having the landing page at `/`, and the homeComponent at some other route, like `/home`, is a good approach — Joakim, Mar 27 '19 at 11:47
would it work for you to hide the nav based on the current path? Like ` — Joakim, Mar 27 '19 at 11:56
Hi Joakin, can you give me more infomation about checCurrentPathHere — user1938143, Mar 27 '19 at 12:00
tough question, I feel like this changes every ng version :( But you can see if my answer works for you. — Joakim, Mar 27 '19 at 12:12

Joakim · Accepted Answer · 2019-03-27T13:28:13.170

1

You can use separate paths for the landing page and the home page, for instance / and /home. Then you can hide the navbar if current path is the landing page, like so:

component.ts:

import { Router, NavigationEnd } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

public hideNav: Boolean;

constructor(private router: Router) {}

ngOnInit() {
    this.router.events
        .subscribe( ( event ) => {
            if ( event instanceof NavigationEnd ) {
                this.hideNav = event.url === '/'
            }
        });
}

component.html:

<mat-sidenav-container [ngClass]="{'hide': hideNav}">

edited Mar 27 '19 at 13:28

answered Mar 27 '19 at 12:11

Joakim

2,092
1
20
23

thx for your reply, But I have now a problem, it was working if the web app is loaded, the landing page will be shown, but in landingpage there is a button, this button will leads to home page with navi, e.g. this.router.navigate(['home']); but it was not working. – user1938143 Mar 27 '19 at 12:48
does the button not take you to the home page, or does it take you to the homepage, but the sidenav doesn't show? – Joakim Mar 27 '19 at 13:06
try adding `routerLink="/home"` to the button. If it doesn't work, please include current code for the button and the error message (if any) – Joakim Mar 27 '19 at 13:11
I Thik, this.hideNav has problem, I have debuged, this.hideNav is [object, object], I think, hideNavi should return either true or false right? – user1938143 Mar 27 '19 at 13:20
yeah sry, I don't remember how to do it and can't easily test my code. But try with my newest changes :) If that doesn't work either, I think you'll have to try the search engines. Edit: Note the changes in the html template, imports, contructor, types etc. – Joakim Mar 27 '19 at 13:30
Hi Joakin, I have also a question, I want to show this landing page only one, as long as the button in landing page is clicked, the next time if the web app is reloaded, it will be not show landing page. did you have ideas? – user1938143 Mar 28 '19 at 05:36
reloading the page shouldn't change the path. If it does, that's probably a bug, in which case its better dealt with in a new question. If you want to remember across sessions whether a user should see the landing page, you need to set a cookie when the user clicks the button. Then you check for the presence of that cookie in ngOnInit() in the landing page component, and redirect to home component if present. You can check out the docs for more on managing cookies. – Joakim Mar 28 '19 at 16:21

How to implement Landing page into a material angular web application

1 Answers1