Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fc2d3a6

Browse files
section 3 - Route Parameters added
section 3 - Route Parameters added
1 parent 16fcc98 commit fc2d3a6

File tree

1 file changed

+154
-0
lines changed

1 file changed

+154
-0
lines changed

‎README.md

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,3 +404,157 @@ export const RoutingComponents = [
404404
</figure>
405405
</p>
406406
407+
3 Route Parameters
408+
=====================
409+
- In this section will learn to pass and read route parameters, as given below:
410+
- http://localhost:4200/departments/production
411+
- http://localhost:4200/user/1
412+
- http://localhost:4200/employee/100
413+
1. In `app-routing.module.ts` create `departments/:id` path route parameters for items under department list component
414+
2. In `department-list.component.ts` class file create a array of departments object
415+
3. In `department-list.component.html` view file iterate/*ngFor through departments array and pass departments id as a route parameter
416+
- on click of the department list item, it will take to `department-details.component page with selected department id`, at the same time browser location path will be displayed as `localhost:5000/department:2 (selected department id )`
417+
- To navigate from code/links/buttons we need `router service as a dependency`
418+
4. Create and use a new component to show details: `department-details.component.ts` - read the departments id passed as a parameter and show the route view accordingly
419+
- `activatedRoute.snapshot.paramMap.get()` is used to read the routes/parameters passed
420+
421+
> **Syntax & Example**: department-list.component.ts
422+
```ts
423+
import { Component, OnInit } from '@angular/core';
424+
import { Router } from '@angular/router';
425+
426+
@Component({
427+
selector: 'app-department-list',
428+
templateUrl: './department-list.component.html',
429+
styleUrls: ['./department-list.component.css']
430+
})
431+
export class DepartmentListComponent implements OnInit {
432+
public departments = [
433+
{ 'id': 1, 'name': 'JavaScript' },
434+
{ 'id': 2, 'name': 'Angular' },
435+
{ 'id': 3, 'name': 'NodeJS' },
436+
{ 'id': 4, 'name': 'ReactJS' },
437+
{ 'id': 5, 'name': 'VueJs' },
438+
]
439+
440+
constructor(private router: Router) { }
441+
442+
ngOnInit() {
443+
444+
}
445+
446+
onLinkSelect(curDepartment) {
447+
console.log('onLinkSelect curDepartment');
448+
// navigate ( path, route parameter)
449+
this.router.navigate(['departments', curDepartment.id]);
450+
}
451+
452+
}
453+
```
454+
455+
> **Syntax & Example**: department-list.component.html
456+
```html
457+
<div>
458+
<h3>Department list:</h3>
459+
460+
<ul class="items">
461+
Click on department to see more details:
462+
<!-- on link click call function/method to navigate -->
463+
<li *ngFor="let department of departments" (click)="onLinkSelect(department)">
464+
<span class="badge">{{department.id}}</span>
465+
<span class="description">{{department.name}}</span>
466+
</li>
467+
</ul>
468+
469+
</div>
470+
```
471+
472+
> **Syntax & Example**: app-routing.module
473+
```ts
474+
import { NgModule } from '@angular/core';
475+
import { Routes, RouterModule } from '@angular/router';
476+
477+
import { DepartmentDetailsComponent } from './components/department-details/department-details.component';
478+
import { DepartmentListComponent } from './components/department-list/department-list.component';
479+
import { EmployeeListComponent } from './components/employee-list/employee-list.component';
480+
import { HomeComponent } from './components/home/home.component';
481+
import { ProductListComponent } from './components/product-list/product-list.component';
482+
import { WildcardPagenotfoundComponent } from './components/wildcard-pagenotfound/wildcard-pagenotfound.component';
483+
484+
const routes: Routes = [
485+
// default path
486+
// { path: '', component:DepartmentListComponent},
487+
{ path: 'home', component: HomeComponent },
488+
{ path: '', redirectTo: 'home', pathMatch: 'full' },
489+
{ path: 'departments', component: DepartmentListComponent },
490+
{ path: 'departments/:id', component: DepartmentDetailsComponent },
491+
{ path: 'employees', component: EmployeeListComponent },
492+
{ path: 'products', component: ProductListComponent },
493+
{ path: '**', component: WildcardPagenotfoundComponent }
494+
];
495+
496+
@NgModule({
497+
imports: [RouterModule.forRoot(routes)],
498+
exports: [RouterModule]
499+
})
500+
export class AppRoutingModule { }
501+
502+
// to store all routing component and avoid importing/writing duplicate list of components in app.routing.module / app.module.
503+
// create an array of all routing components export it then imports it in app.module.ts
504+
export const RoutingComponents = [
505+
DepartmentDetailsComponent,
506+
DepartmentListComponent,
507+
EmployeeListComponent,
508+
HomeComponent,
509+
ProductListComponent,
510+
WildcardPagenotfoundComponent,
511+
]
512+
```
513+
514+
> **Syntax & Example**: department-details.component.ts
515+
```ts
516+
import { Component, OnInit } from '@angular/core';
517+
import { ActivatedRoute } from '@angular/router';
518+
519+
@Component({
520+
selector: 'app-department-details',
521+
templateUrl: './department-details.component.html',
522+
styleUrls: ['./department-details.component.css']
523+
})
524+
export class DepartmentDetailsComponent implements OnInit {
525+
// to hold the currently passed id parameter
526+
public selectedDepartmentId;
527+
528+
constructor(private activatedRoute: ActivatedRoute) { }
529+
530+
ngOnInit() {
531+
// read the route parameter
532+
533+
// snapshot approach
534+
console.log(this.activatedRoute.snapshot.paramMap);
535+
let routeParamId = parseInt(this.activatedRoute.snapshot.paramMap.get('id'));
536+
this.selectedDepartmentId = routeParamId;
537+
}
538+
539+
}
540+
```
541+
542+
> **Syntax & Example**: department-details.component.html
543+
```html
544+
<h3>Selected Deparment Details ID : {{ selectedDepartmentId }} </h3>
545+
```
546+
547+
<p>
548+
<figure>
549+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/3.1-route-parameters-department-list-home.png" alt="Image - Output - Route P arameters Department List" title="Image - Output - Route P arameters Department List width="1000" border="2" />
550+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Route P arameters Department List</figcaption>
551+
</figure>
552+
</p>
553+
554+
<p>
555+
<figure>
556+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/3.2-route-parameters-department-clicked.png" alt="Image - Output - Route P arameters Department Clicked/Selected" title="Image - Output - Route P arameters Department Clicked/Selected width="1000" border="2" />
557+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Route P arameters Department Clicked/Selected</figcaption>
558+
</figure>
559+
</p>
560+

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /