Angular route navigation not redirecting to other component

Question

I am new to angular and i am working on angular 4 app and trying to navigate from module component to layout component when button clicked. but navigate not working.

and i don't see any error message.

i spent lot of time on google to resolve this issue but i am unable to resolve.

below is the code.

html:

      <div class="land-item" (click)="qualityrd()">      
      <h3>QAULITY</h3>
      <i class="fa fa-thumbs-o-up"  style="color:blue"></i>
      <div class="over-item">

component:

import {Component} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
    selector: 'app-module-selector',
    templateUrl: './module-selector.component.html',
    styleUrls: ['../css/style.css', '../css/responsive.css']
})
export class ModuleSelectorComponent {

    constructor(
        private _router: Router, private route: ActivatedRoute) {
    }
    
    qualityrd(): void {
        this._router.navigate(['/QualityLayout']);
    }
}

Layout Component

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './Layout.html',
    styleUrls: ['../css/footer.css']
})
export class LayoutComponent {
    isIn = false;   // store state
    toggleState() { // click handler
        let bool = this.isIn;
        this.isIn = bool === false ? true : false;
    }
}

And finally my app module:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import {AppComponent} from './app.component';
import {RouterModule, Routes} from '@angular/router';
import {LayoutComponent} from './Layout/Layout.Component';
import {ExcelDownloadComponent} from './ExcelDownload/ExcelDownload.Component';
import {ExcelUploadComponent} from './ExcelUpload/ExcelUpload.Component';
import {SpotCheckStatusComponent} from './spotCheck/spotcheckstatus.component';
import {PageNotFoundComponent} from './others/PageNotFoundComponent';
import {FileDropDirective, FileSelectDirective} from 'ng2-file-upload';
import {ModuleSelectorComponent} from './module-selector/module-selector.component';

const appRoutes: Routes = [
    {path: 'SPOTCHECK', component: SpotCheckStatusComponent},
    {path: 'ExcelDownalod', component: ExcelDownloadComponent},
    {path: 'ExcelUpload', component: ExcelUploadComponent},
    {path: 'ModuleSelector', component: ModuleSelectorComponent},
    {path: 'QualityLayout', component: LayoutComponent},
    {path: '', redirectTo: '/ModuleSelector', pathMatch: 'full'},
    {path: '**', component: PageNotFoundComponent}
];

@NgModule({
    declarations: [AppComponent, SpotCheckStatusComponent, PageNotFoundComponent,
        LayoutComponent, ExcelDownloadComponent, ExcelUploadComponent,
        ExcelDownloadComponent, FileDropDirective, FileSelectDirective, ModuleSelectorComponent],
    imports: [BrowserModule, FormsModule, HttpModule, ReactiveFormsModule,
        RouterModule.forRoot(appRoutes)],
    providers: [],
    bootstrap: [ModuleSelectorComponent]
})
export class AppModule {
}

You asked this question 2 times "this.router.navaigate not working" and modified your code and question differently. Where is qualityrd in your template? "(click)="qualityrd()". Sorry, I see it. Your code should work. — harold_mean2
– harold_mean2, Commented Sep 30, 2017 at 18:35

harold_mean2 · Accepted Answer · 2017-09-30 19:02:49Z

3

Below is a partial code for my app.module and it works.

providers: [CategoryService, SubCategoryService, FeaturedBrandService, 
  {provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [AppComponent]  ** instead of Module Selector component
})
export class AppModule { }

Your code should work with this change. Otherwise, you may may have to breakdown your code (comments some of your codes) until it can route to QualityLayout. Just trying to help.

answered Sep 30, 2017 at 19:02

harold_mean2

2381 silver badge14 bronze badges

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

Collectives™ on Stack Overflow

Angular route navigation not redirecting to other component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related