angular2-routing

When we navigate to a route and load components, Can we pass variable decorated with @Input in loaded child component and can we subscribe to EventEmitter decorated with @Output ? Is there any lifecycle Hook available in parent, where Route is defined and we may get a reference to loaded component, so as to pass values\subscribe functions to child component dynamically? Parent Component @Component({ moduleId: module.id, selector: "parent", templateUrl: "<router-outlet></router-outlet>" }) @Routes([ { path: "/child-component1", component: Child1Component } ]) export class Parent { // Can we

I am trying to show validate message in form in angular 2 ? I am getting this error Cannot read property 'hasError' of undefined I added these lines <div *ngIf="username.hasError('required') && username.touched" class="error-box"> username is required</div> <div *ngIf="username.hasError('minlength') && username.touched" class="error-box"> Minimum password length is 8!</div> here is my code https://plnkr.co/edit/slhySWT0mJXkloGK1kfO?p=preview Günter Zöchbauer This should do what you want: <ion-input type="text" ngControl="username" #username="ngForm"></ion-input> <div *ngIf="username.errors?

have a scenario,if user enters one number and submit it should navigate to that id and display the details. when i navigate url,it's showing something like this complaintstatus/TS0000031?complntId=TS0000031 Detail view code: export class ComplaintDetailComponent implements OnInit { id:number; private sub:any; complntId : any; constructor(private ComponentService:ComplaintService,private route:ActivatedRoute){ } ngOnInit() { this.sub= this.route.params.subscribe((params:Params)=>{ this.ComponentService.getCompliants(params['complntId']) }); console.log(this.sub); } user enters id code : export

I want to have a default route in my sub-component (set with useAsDefault: true ) and to have parameters automatically passed to it. I cannot find anywhere in documentation how to do it. I have a parent component with a following route: $routeConfig = [ { path: '/employees/...', component: 'employeesComponent', name: 'Employees'} ] and a child component with: $routeConfig = [ { path: '/:group/:filter', component: 'employeeListComponent', name: 'Group', useAsDefault: true} { path: '/details/:employeeId/...', component: 'profileComponent', name: 'EmployeeProfile'} ] This of course fails with:

I have this issue. Chat is a parent component and it has Messages child component. I have url-s, /chat/ , /chat/:id . So i can get :id param in Messages component with RouteParams , but i need that :id in Chat component. So if i load /chat/46 then Chat component knows that 46 :id If i am loading it as directive something like <messages (Event)="handleEvent()"></messages> than i can pass it via EventEmitter and Output, but if i load component through <router-outlet> how i can pass value back to the parent ? EventEmitter and Output doesn't work in this case. Maybe there is something in router

I've implemented my custom error handler, and in that I want to re-direct to my custom error page that just says "sorry, an error occurred......". I declared a route under my app-routing.module.ts file like this: import { NgModule } from '@angular/core'; import { PreloadAllModules, Routes, RouterModule } from '@angular/router'; import { NoContentComponent } from './no-content/no-content.component' import { CustomErrorComponent } from './customerror/customerror.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, { path: 'resources', loadChildren: 'app

I would like to use the RouteConfig to pass a variable from my AppComponent to Coursescomponent, but the "data" property in route config can only pass constant parameter, and it cannot recognize "this". Is there a way to do this? If not, what is a best practice to pass variables to routed components? @Component({ selector: 'app', template: ` <router-outlet></router-outlet> `, directives: [ROUTER_DIRECTIVES], }) @RouteConfig([ { path: '/courses' , name: 'Courses' ,component: CoursesComponent ,data:{token:this.token}} // this doesn't work -- cannot read property "token" of undefined ]) export