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

Browse files
Section 4 - Route Parameters Observables added
Section 4 - Route Parameters Observables added
1 parent f8dd51e commit 2bb9fa6

File tree

1 file changed

+88
-4
lines changed

1 file changed

+88
-4
lines changed

‎README.md

Lines changed: 88 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -546,15 +546,99 @@ export class DepartmentDetailsComponent implements OnInit {
546546

547547
<p>
548548
<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>
549+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/3.1-route-parameters-department-list-home.png" alt="Image - Output - Route Parameters Department List" title="Image - Output - Route Parameters Department List" width="1000" border="2" />
550+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Route Parameters Department List</figcaption>
551551
</figure>
552552
</p>
553553

554554
<p>
555555
<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>
556+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/3.2-route-parameters-department-clicked.png" alt="Image - Output - Route Parameters Department Clicked/Selected" title="Image - Output - Route Parameters Department Clicked/Selected" width="1000" border="2" />
557+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Route Parameters Department Clicked/Selected</figcaption>
558558
</figure>
559559
</p>
560+
561+
4 paramMap Observable
562+
=====================
563+
- Using the `activatedRoute.snapshot` got some drawback like: when will navigate back next / previous next from child component `(details component to list component)` snapshot approach does not work
564+
1. In department-details.component.html add links Previous & Next to see rest of departments with click handler `<a (click)="goPrevious()">Back </a>`
565+
2. In `department-details.component.ts` create a handler `goPrevious()` & `goNext()` with required logic
566+
3. If you will observe the drawback here is on Previous & Next button clicks, `only url updates/changing but view/template not changing (ngOnInit does not get call)`
567+
4. To overcome activatedRoute.snapshot problems will use `paramMap Observable with subscribe`
568+
569+
> **Syntax & Example**: department-details.component.html
570+
```html
571+
<h3>Selected Deparment Details ID : {{ selectedDepartmentId }} </h3>
572+
573+
<br />
574+
575+
<a (click)="goPrevious()" class="link-sub">Previous</a> &nbsp; &nbsp;
576+
<a (click)="goNext()" class="link-sub">Next</a>
577+
```
578+
579+
> **Syntax & Example**: department-details.component.ts
580+
```ts
581+
import { Component, OnInit } from '@angular/core';
582+
import { ActivatedRoute, Router, ParamMap } from '@angular/router';
583+
584+
@Component({
585+
selector: 'app-department-details',
586+
templateUrl: './department-details.component.html',
587+
styleUrls: ['./department-details.component.css']
588+
})
589+
export class DepartmentDetailsComponent implements OnInit {
590+
// to hold the currently passed id parameter
591+
public selectedDepartmentId;
592+
593+
constructor(private activatedRoute: ActivatedRoute, private router: Router) { }
594+
595+
ngOnInit() {
596+
// read the route parameter
597+
598+
// snapshot approach
599+
// console.log(this.activatedRoute.snapshot.paramMap);
600+
// let routeParamId = parseInt(this.activatedRoute.snapshot.paramMap.get('id'));
601+
// this.selectedDepartmentId = routeParamId;
602+
603+
// paramMap Observable approach
604+
this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
605+
let id = parseInt(params.get('id')); // let id = Number(params.get('id'))
606+
this.selectedDepartmentId = id;
607+
})
608+
}
609+
610+
goPrevious() {
611+
let previousId = this.selectedDepartmentId - 1;
612+
this.router.navigate(['/departments', previousId]);
613+
}
614+
615+
goNext() {
616+
let nextId = this.selectedDepartmentId + 1;
617+
this.router.navigate(['/departments', nextId]);
618+
}
619+
620+
}
621+
```
622+
623+
<p>
624+
<figure>
625+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/4.1-route-parameters-previous.png" alt="Image - Output - Route Parameters Previous ID" title="Image - Output - Route Parameters Previous ID" width="1000" border="2" />
626+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Route Parameters Previous ID</figcaption>
627+
</figure>
628+
</p>
629+
630+
<p>
631+
<figure>
632+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/4.2-route-parameters-next.png" alt="Image - Output - Route Parameters Next ID" title="Image - Output - Route Parameters Next ID" width="1000" border="2" />
633+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Route Parameters Next ID</figcaption>
634+
</figure>
635+
</p>
636+
637+
<p>
638+
<figure>
639+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/4.3-route-parammap-observable-next.png" alt="Image - Output - Route Parameters Observables Next ID" title="Image - Output - Route Parameters Observables Next ID" width="1000" border="2" />
640+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Route Parameters Observables Next ID</figcaption>
641+
</figure>
642+
</p>
643+
560644

0 commit comments

Comments
(0)

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