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

Browse files
section 5 - optional route parameters added
section 5 - optional route parameters added
1 parent 149ca59 commit 882d0c7

File tree

1 file changed

+78
-1
lines changed

1 file changed

+78
-1
lines changed

‎README.md

Lines changed: 78 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -641,4 +641,81 @@ export class DepartmentDetailsComponent implements OnInit {
641641
</figure>
642642
</p>
643643

644-
644+
5 Optional Route Parameters
645+
=====================
646+
- By using `Back button in department-details.component.html` we must `navigate back to department-list.component.html` and show clicked department in selected state`
647+
1. In department-details.component add `Back` button: `<button click="goToDepartments()">Back </button> `
648+
2. In `department-details.component.ts` create a handler ` goToDepartments()` with required logic,
649+
// Use Back button to go to main list page and highlight the link by passing optional parameters with departments details, when back it shows in url `http://localhost:5000/departments;id=4`
650+
3. In `department-list.component.ts` add required login in `ngOnInit()` life cycle hook to read the passed optional parameter and to highlight clicked department button
651+
652+
> **Syntax & Example**: department-details.component.html
653+
```html
654+
<!-- // back button - method to handle optional parameters and show current clicked department highlighted -->
655+
<button (click)="goToDepartments()" class="button-sub">Back</button>
656+
```
657+
658+
> **Syntax & Example**: department-details.component.ts
659+
```ts
660+
// back button - method to handle optional parameters and show current department highlighted
661+
goToDepartments() {
662+
console.log('goToDepartments clicked');
663+
let currentSelectedId = this.selectedDepartmentId ? this.selectedDepartmentId : null
664+
//sending optional parameter - used for some logic
665+
//this.router.navigate(["/departments", { id: currentSelectedId, test: 'test-param-value' }])
666+
667+
// relative path, links parameter array - {key:value}, {relativeTo property}
668+
// we can pass multiple parameters as per our requirements
669+
// this.router.navigate(['../', { id: currentSelectedId, name: 'Hello' }]);
670+
this.router.navigate(['../', { id: currentSelectedId }]);
671+
}
672+
```
673+
674+
> **Syntax & Example**: department-list.component.ts
675+
```ts
676+
ngOnInit() {
677+
this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
678+
let id = parseInt(params.get('id')); // let id = Number(params.get('id'))
679+
this.selectedDepartmentId = id;
680+
})
681+
}
682+
683+
/* on department click */
684+
onLinkSelect(curDepartment) {
685+
console.log('onLinkSelect curDepartment');
686+
// navigate ( path, route parameter)
687+
// this.router.navigate(['departments', curDepartment.id]);
688+
689+
// relative path, links parameter array, relativeTo property
690+
this.router.navigate([curDepartment.id]);
691+
}
692+
693+
// to compare/match current route clicked and optional parameter
694+
isSelectedRouteMatchOptionalParam(curDepartment) {
695+
return curDepartment.id === this.selectedDepartmentId;
696+
}
697+
```
698+
699+
> **Syntax & Example**: styles.css
700+
```css
701+
/* optional parameter - show highlighted */
702+
.items li.selected {
703+
color:#039be5;
704+
background-color: #CFD8DC;
705+
}
706+
```
707+
708+
<p>
709+
<figure>
710+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/5.1-optional-route-parameters-back.png" alt="Image - Output - Optional Route Parameters Back" title="Image - Output - Optional Route Parameters Back" width="1000" border="2" />
711+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Optional Route Parameters Back</figcaption>
712+
</figure>
713+
</p>
714+
715+
<p>
716+
<figure>
717+
&nbsp;&nbsp;&nbsp; <img src="./_images-angular-routing/5.2-optional-route-parameters-selected-list.png" alt="Image - Output - Optional Route Parameters Selected List " title="Image - Output - Optional Route Parameters Selected List " width="1000" border="2" />
718+
<figcaption>&nbsp;&nbsp;&nbsp; Image - Output - Optional Route Parameters Selected List </figcaption>
719+
</figure>
720+
</p>
721+

0 commit comments

Comments
(0)

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