CODEWITHSUNDEEP
angularangular-router
user3301440
user3301440

Reputation: 850

Angular route navigation not redirecting to other component

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 {
}

Upvotes: 0

Views: 1025

Answers (1)

harold_mean2
harold_mean2

Reputation: 238

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.

Upvotes: 3

Related Questions