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