Angular

Angular Samples

Home

1. Create New Component
2. Component To HTML
3. @Input
4. Button Click Event
5. @Output
6. Template Variable
7. *ngFor
8. Safe Navigation Operator
9. *ngIf
10. Hidden Property
11. *ngSwitch
12. Service
13. Routing
14. Routing with Parameter
15. Router Link
16. Module
17. Lazy Loaded Module

Routing with Parameter

my-second-component.component.ts


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

@Component({
	selector: 'app-my-second-component',
	templateUrl: './my-second-component.component.html',
	styleUrls: ['./my-second-component.component.css']
})

export class MySecondComponentComponent implements OnInit {

	employee:any

	constructor(private route:ActivatedRoute) { }

	ngOnInit() {
		this.employee = this.employee1[this.route.snapshot.params['id']]
	}

	employee1=[{
	    id:0,
	    name:'Akshay Patel'
	  },
	  {
	    id:1,
	    name:'Panth Patel'
	  },
	  {
	    id:2,
	    name:'Jemin Patel'
	  }]
}

my-second-component.component.html


<h2>Employee Details</h2>
 {{employee.id}} <br/>
 {{employee.name}} 
<hr/>

routes.ts


import {Routes} from '@angular/router'
import { MySecondComponentComponent } from './my-second-component/my-second-component.component';
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';

export const appRoutes:Routes=[

	{path:'employees',component:MyFirstComponentComponent},

	{path:'employees/:id',component:MySecondComponentComponent},

	{path:'',redirectTo:'/employees',pathMatch:'full'}
]

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyFirstComponentComponent } from './my-first-component/my-first-component.component';
import {appRoutes} from './routes';
import { RouterModule } from '@angular/router';
import { MySecondComponentComponent } from './my-second-component/my-second-component.component';

@NgModule({

	declarations: [
		AppComponent,
		MyFirstComponentComponent,
		MySecondComponentComponent
	],
	
	imports: [
		BrowserModule,
		RouterModule.forRoot(appRoutes)
	],
	
	providers: [],
	
	bootstrap: [AppComponent]
	})
	
	export class AppModule { }

app.component.html


<router-outlet></router-outlet>