How to Create Navigation link from app component page to other pages in angular 4?

Question

Hi I am completely new to Angular and I tried other stack overflow answers also. Currently I am working on angular 4 project. As per my project, I need to create designs only right now using angular and its routing. What I actually want is a login page, once key in login button need to go to another page with horizontal left side navbar along with its first child active and by clicking navbar menus, only content needs to change and the navbar remains static for all other pages(except login only). After go through lot of videos finally, I created a login page. I wrote the codes for Login page in appcomponent.html and I gave routerlink to the button login to open up the login page. my routing working, once I click login my url changes from http://localhost:4200/ to http://localhost:4200/sidebar but my page still shows login page designs only.

Codes are below: index.html

<body >
  <app-root></app-root>
</body>

app.component.ts

import { Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SidebarComponent } from './sidebar/sidebar.component';

const appRoutes: Routes = [
  { path:'sidebar', component: SidebarComponent  }
];

@NgModule({
  declarations: [
    AppComponent,
    SidebarComponent,
   ],
  imports: [   
    RouterModule.forRoot(appRoutes),
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

I give only login button code where I gave router link as there is lot of codes

<div class="col-md-12 col-md-push-6 text-center">
<a routerLink="/sidebar" routerLinkActive="active"> <button id="Enter" class="btn btn-primary btn-block btn-flat fa fa-sign-in" > Log-In</button></a>
 </div>

and I give <router-outlet></router-outlet> inside my nav bar page where I want to render content. As currently my one not working I changed the sidebar.htlm page coding as <h1> TESTING </h1> only. What I did wrong?. Kindly help.

Its a design for login page only. Only I gave routerlink in login button is different from other project. that router link code also I gave above(as design code is quite big, I gave button code only ). — Ben

Shadab Faiz Shadab Faiz · Accepted Answer · 2018-05-04T05:24:18

Have you given any router-outlet on the app.component.html? You need this to display the components. This is how my app.component.html looks like:

 <app-navbar></app-navbar> // This is be present on whole web page/app.
    <any-other -component-that-should-be-alway-present-on-whole-page>
    </any-other -component-that-should-be-alway-present-on-whole-page>

    <router-outlet></router-outlet>

    <app-footer></app-footer>

Also, if your code for view is large, then you should create sub components instead of coding everything in single component. For Z-Index, look at this

For 1st logic: in your login component:

  navbar;
  ngOnInit() {
    this.navbar = document.getElementById('navbar'); // change this as per the way you want to get the navbar component.
    navbar.style.display = "none";
  }

But this is not enough. You have to display navbar again if you go to other components from this login page. So implement OnDestroy on your login component and write the below code.

  ngOnDestroy() {
    this.navbar.style.display = "block or w/e";
  }

How to Create Navigation link from app component page to other pages in angular 4?

1 Answers