Angular Tutorial - 25 - Route Parameters

why did you not use this.departmentId = parseInt(this.route.snapshot.paramMap.get('id'));

can u enable auto-subtitles for this video?

Zabardust Master Ji

hey your CSS file is empty is the GIT HUB REPO, kindly provide it

Thank you very much, helped me a lot!

thanks, you have a good voice

Thank you! Helped me alot!

Thanks for video i have learned a lot from this playlist

I have one doubt.. you have used navigate method i have done same with routerlink (dynamic binding [routerLink] ="['department', department.id]" )
Its working same

Could you please let me know what is difference between these two

Thank you so much sir.
Great explanation. Kudos

Can you use router to create a link that dynamically points to rest api in back end? for example in case of a put request?

What is the purpose of keyword snapshot

I am not able to click on angular mongodb etc please help me itsurgent

You saved my weeks)))

Good video

What if you want to put the name instead of the id?

First of all thanks for this awesome tutorial, I have tried this code and it's working on localhost only, Not working on a live server. any idea?

Argument of type 'string | null' is not assignable to parameter of type 'strin
g'.
i used all your service tutorial from there add this

public employees: Array<IEmployee> = [];
public departmentId;
constructor(private _employeeService:EmployeeService, private _activeRoute:ActivatedRoute) { }

ngOnInit(): void {
let id = parseInt(this._activeRoute.snapshot.paramMap.get('id'));

this._employeeService
.getEmployees()
.subscribe(data => this.employees = data);
}

parseInt(this.route.snapshot.get('id') always get error but when removing parseInt no error comes but data not displayed after passing id in url , page not found open, but in console data comes

How do i route to a new page without the old contents on it?

department-detail.component.ts

Solution 1:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';

export class DepartmentDetailComponent implements OnInit {
public departmentID: any

constructor(private router: Router, private route: ActivatedRoute) { }

ngOnInit(): void {
this.route.paramMap.subscribe((params: ParamMap) => this.departmentID = parseInt(params.get('id') || ''));
// or this.route.paramMap.subscribe((params: ParamMap) => this.departmentID = parseInt(params.get('id') || '{}'));
}

previous() {
let previousId = this.departmentID - 1
this.router.navigate(['/departments', previousId])
}

next() {
let nextId = this.departmentID + 1
this.router.navigate(['/departments', nextId])
}
}

Solution 2:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';

export class DepartmentDetailComponent implements OnInit {
public departmentID: any

constructor(private router: Router, private route: ActivatedRoute) { }

ngOnInit(): void {
this.route.paramMap.subscribe((params : ParamMap) => {
let id: any = parseInt(params.get('id') || '')
// or let id: any = parseInt(params.get('id') || '{}')
this.departmentID = id
})
}

previous() {
let previousId = this.departmentID - 1
this.router.navigate(['/departments', previousId])
}

next() {
let nextId = this.departmentID + 1
this.router.navigate(['/departments', nextId])
}
}

Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.

let id = parseInt(this.route.snapshot.paramMap.get('id'));

Getting error. Can anyone help?

you helped me so much , many thanks for you man

Completely understand. Thank you!

your explanation is top-notch but the fake accent is bothering me

Thank you for the video. Great one

good tutorial awesome man

I'm getting an error as template parse error.

Can anyone help me out?

Gracias que compre mi tarjeta 1060 6GB antes de la crisis me salio en 4500 mxn

Please make series on Angular 12

It didn't work for me, I got {{departmentId}} dispalyed like this in the screen

thank you it really helps

in recent version we need to implement this....
this.route.paramMap.subscribe(params => {
this.departmentId = params.get('id')});

If anyone's facing a problem with this error:
Error: src/app/department-detail/department-detail.component.ts:17:23 - error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.

Use this:
parseInt(this.route.snapshot.paramMap.get('id') as string)

instead of this:
parseInt(this.route.snapshot.paramMap.get('id'))

can't explain the theory behind this, but it works for current versions

After this video i feel my iq growed for 10 more

Hello sir. I am getting an error saying Parameter 'department' implicitly has an 'any' type. If I put department: any, then its showing blank.
Please help.

Thank you @Codevolution for this amazing series! Your explanation is very simple and clear!

I got an error in departmentDetails.components.ts file in
ngOnInit(): void {
let i = parseInt(this.route.snapshot.paramMap.get('id')) as number; //this line
this.deptId = i;
}

Error : Argument of type 'string | null' is not assignable to parameter of type 'string'.
Type 'null' is not assignable to type 'string'.

Could someone please help? Thanks in Advance!!!

How do you past the rest of the properties to display on the department detail component?

Accurate 100% that I was looking for... Thank you

Amazing content, thanks!

How to write that css?

let id = JSON.parse(this.route.snapshot.paramMap.get('id')!);
this might help

I have problem router with params, can you help me to solve problem with message error "NG04014: Invalid configuration of route '/departement/:id': path cannot start with a slash"

can't display the department list code are same as you right

<3

Does anyone knows how to change the parameters as name selected instead of the id? I have tried the following method with no error but but nothing shows.


onSelect(department) {
this.router.navigate(['/departments', department.name]);
}


public departmentId="";
ngOnInit() {
this.departmentId = this.route.snapshot.paramMap.get('name');
}

i finally get it... this part took a little longer to understand!

for those who have error in : department-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';

@Component({
selector: 'app-department-details',
template: `
<p>
department-details works!
</p>
<h3>Your selected department with id = {{ departmentId }}</h3>
`,
styles: [],
})
export class DepartmentDetailsComponent implements OnInit {
public departmentId: any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
this.route.paramMap.subscribe((params: ParamMap) => {
const idParam = params.get('id');
if (idParam !== null) {
let id = parseInt(idParam);
this.departmentId = id;
} else {
// Handle the case when 'id' is null
// You can set a default value or take appropriate action here.
}
});
}
}

Dude, thank you for this useful video without “extra water”