Redirecting to another page in angular 4

Question

I want to redirect to another page by clicking on the link. For that I tried out below code:

home.component.html

<a [routerLink]="['/datalineage']">
Click Here
</a>

app-routing.module.ts

import { DatalineageComponent } from './datalineage/datalineage.component';

const appRoutes: Routes = [
    { path: 'datalineage', component: DatalineageComponent, data: { title: 'Test' } }
];

@NgModule({
    imports: [
        RouterModule.forRoot(
            appRoutes, { enableTracing: true }
        )
    ],
    exports: [
        RouterModule
    ],
    providers: []
})

datalineage.component.ts

import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs/Observable';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
  selector: 'app-datalineage',
  templateUrl: './datalineage.component.html',
  styleUrls: ['./datalineage.component.css']
})
export class DatalineageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

But it is not going to the clicked page, it shows http://localhost:4200/datalineage in URL but it remains on the same page. What can be the issue?

since you have enabled tracing, why not also post tracing logs? — Pengyy, Mar 28 '18 at 06:12
if you are already on `DatalineageComponent`, then you will not change anything. Also, you need to have a `` somewhere in your html-code (maybe inside app.component.html)? — John, Mar 28 '18 at 06:14
@PathikVejani wherever you like, but usually it is inside `app.component.html` — John, Mar 28 '18 at 06:15
@John i put that but now it shows both pages data after clicking on the link. — Pathik Vejani, Mar 28 '18 at 06:16
@PathikVejani that may be because you are also adding `` inside the app.component.html file. You only need the ``. Then the component defined in your `appRoutes` will be visible for the given route. — John, Mar 28 '18 at 06:18
@John In `app.component.html` I have home page data also. If i put `` then it shows both page data on clicking. — Pathik Vejani, Mar 28 '18 at 06:19
@John if i remove `` then it will not display link where i want to click and redirect it. — Pathik Vejani, Mar 28 '18 at 06:20
Try `routerLink="/datalineage"`, also all that you need is here @ https://angular.io/guide/router#basics-wrap-up — Thirueswaran Rajagopalan, Mar 28 '18 at 06:21
@PathikVejani it is easier to help if you have a stackblitz or similar, but my guess is that you have to structure your code a bit differently in order for it to work. The router-outlet will replace the component based on the path. All other html defined in app.component.html will still be visible, even though the path changes. — John, Mar 28 '18 at 06:24
@PathikVejani "@John what i have to change? " -> Your attitude ;) The community tries to understand you and give support. Be respectful ;) — mihai, Mar 28 '18 at 06:45

mihai · Answer 1 · 2018-03-28T06:41:39.527

0

navigation template.
<h1>Working Routing</h1> <nav> <a [routerLink]=" ['./'] " routerLinkActive="active">Home</a> <a [routerLink]=" ['./datalineage'] " routerLinkActive="active">Data Lineage</a> </nav> <router-outlet></router-outlet>
app.routing template:

import { HomeComponent } from './home/home.component';
import { DatalineageComponent } from './datalineage/datalineage.component';

const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'datalineage', component: DatalineageComponent },
    { path: '', redirectTo: 'home' }
];

app.module template:

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, { enableTracing: true })
    ],
    exports: [
        RouterModule
    ],
    providers: []
})

Reference: https://angular.io/guide/router

For how to pass data between components check these sources:

How do I pass data to Angular routed components?

https://angular.io/guide/component-interaction

edited Mar 28 '18 at 06:41

answered Mar 28 '18 at 06:24

mihai

2,746
3
35
56

what should be in `app.component.html`? – Pathik Vejani Mar 28 '18 at 06:37
it is not redirecting to `HomeComponent` if nothing is passed in url – Pathik Vejani Mar 28 '18 at 06:38
you can add the first snippet of code, under **navigation template** for now. Later you maybe will want to extract navigation in a separate component ;) – mihai Mar 28 '18 at 06:39
why it is not loading `HomeComponent`? – Pathik Vejani Mar 28 '18 at 06:40
"it is not redirecting to HomeComponent if nothing is passed in url " - it should, I set a `path: ''` which will handle the empty routes, otherwise... let me update the routing . 1 min – mihai Mar 28 '18 at 06:40
i got it but still it is not redirecting to home – Pathik Vejani Mar 28 '18 at 06:41
would you liek to check appRoutes snippet ? :) I've updated it. May it solves – mihai Mar 28 '18 at 06:42
can you remove what you have in app.component.html and paste just the snippet from **navigation template** section, just to ensure it is working. There is not a big problem with routing if you'll follow the instructions from the **Reference** I mentioned. – mihai Mar 28 '18 at 06:47
i removed and it shows pasted data of urs. so it is working but when i click on "home" link it is not redirecting. – Pathik Vejani Mar 28 '18 at 06:48

Redirecting to another page in angular 4

1 Answers1