I am facing an issue with passing static data from a route to a component in Angular. Despite trying to pass the data in the route configuration, I keep receiving empty data when subscribing to it from the ActivatedRoute. Below is the code snippet that I have implemented:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from '../../app.component';
import { CompanyInformationComponent } from '../../components/pages/company/company-information/company-information.component';
import { CompanyDescriptionComponent } from '../../components/pages/company/company-description/company-description.component';
const routes: Routes = [
{ path:'', redirectTo: 'company-information', pathMatch: 'full', data: { title: 'Company Information' } },
{ path:'company-information', component: CompanyInformationComponent, data: { title: 'Company Information' } },
{ path:'company-description', component: CompanyDescriptionComponent, data: { title: 'Company Description' } },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [
RouterModule
],
providers: [
]
})
export class routingModule { }
This is the code for my header component:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'site-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor( private route:ActivatedRoute ) {}
ngOnInit() {
this.route.data.subscribe(
data => {
console.log('Title',data);
}
)
}
}