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
– Joakim, Commented Mar 27, 2019 at 11:36
e.g. I wannt to show the landing page first, if I load e.g. 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
– user1938143, Commented Mar 27, 2019 at 11:40
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
– Joakim, Commented Mar 27, 2019 at 11:47

Joakim · Accepted Answer · 2019-03-27 13:28:13Z

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, 2019 at 13:28

answered Mar 27, 2019 at 12:11

Joakim

2,1722 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1938143 Over a year ago

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.

Joakim Over a year ago

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 Over a year ago

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)

user1938143 Over a year ago

I Thik, this.hideNav has problem, I have debuged, this.hideNav is [object, object], I think, hideNavi should return either true or false right?

Joakim Over a year ago

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.

|

Collectives™ on Stack Overflow

How to implement Landing page into a material angular web application

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related