Тёмный

Angular read route parameters 

kudvenkat
Подписаться 829 тыс.
Просмотров 33 тыс.
50% 1

In this video we will discuss, reading route parameter values in Angular 2 and later versions.
Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
/ @aarvikitchen5572
To read the route parameter value use Angular ActivatedRoute service.
There are 2 ways to read the route parameter value.
We can either use the snapshot approach or observable approach.
Snapshot approach works fine, if you navigate to another component before navigating from the current employee to the next employee. In our case we are always navigating back to the ListEmployeesComponent before navigating to view another employee details.
If you expect users to navigate from employee to employee directly, without navigating to another component first, then you need to use the observable approach. We will discuss the observable approach in our next video.
constructor(private _route: ActivatedRoute) { }
ngOnInit() {
const id = +this._route.snapshot.params['id'];
}
Since Angular 4, params have been deprecated in favor of the new interface paramMap. So if you are using Angular 4 or above, use paramMap instead of params.
ngOnInit() {
const id = +this._route.snapshot.paramMap.get('id');
}
Introduce getEmployee() method in employee.service.ts file
getEmployee(id: number): Employee {
return this.listEmployees.find(e => e.id === id);
}
Text version of the video
csharp-video-tutorials.blogspo...
Slides
csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
• Angular CRUD tutorial
Angular CRUD Tutorial Text Articles & Slides
csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
ru-vid.com...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic

Наука

Опубликовано:

 

16 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 16   
@pandarzzz
@pandarzzz 6 лет назад
Thank you for sharing this informative video! 🦄🖐🏾
@aasthawadhwa2575
@aasthawadhwa2575 3 года назад
Thankyou so much, this was exactly what I wanted in my current project.
@hasithasubhashana9606
@hasithasubhashana9606 3 года назад
Thank you very much for this video. very useful and well explained
@mohamedsahli9935
@mohamedsahli9935 3 года назад
Thank you
@puneetkankar
@puneetkankar 6 лет назад
Sir, can be possible we use routing URL dynamically from database.
@ashutoshkushawaha6664
@ashutoshkushawaha6664 6 лет назад
can i use third party jquery library in our angular 5 project. Please give me a solution.
@Vignesh0206
@Vignesh0206 6 лет назад
Sir Can you please do a series on Angular 4 + Nodejs ?
@chetansharma4751
@chetansharma4751 6 лет назад
constructor(private _router: Router) { _router.events.subscribe((val) => { // Some code }); I am using this code to subscribe to route change events, but it triggers many times.. Is there any other way to subscribe to only routechanged event?
@anuragranjan6739
@anuragranjan6739 5 лет назад
Can any one explain me e => e.id === id which exists in employee.service.ts file getEmployee(id: number): Employee { return this.listEmployees.find(e => e.id === id); } I confuse all the time when I get this type of code
@ChandanKumar-ik8pf
@ChandanKumar-ik8pf 6 лет назад
Part 42 video is not available, however the text version is available. May be you will be in process to upload it !!
@Csharp-video-tutorialsBlogspot
Hi Chandan. Just uploaded Part 42. Here is the link. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jZJY70PY10w.html
@annaramjayasantosh5473
@annaramjayasantosh5473 5 лет назад
Hi Sir, You're Fabulous. at vedio 8:23 if change the code to [routerLink]="['/list',2]" , after pressing the button we are not navigating to employee list component with id=2 .
@annaramjayasantosh5473
@annaramjayasantosh5473 5 лет назад
Solved the problem after watching next vedio
@tharund3572
@tharund3572 6 лет назад
Entire Code for videos angular crud can be found at github.com/tharun-d/AngularCrud
@zubiapervaiz1005
@zubiapervaiz1005 4 года назад
Snapshot.params is not working for me .i am using angular 6
@GUILLERMOZAYAS2002
@GUILLERMOZAYAS2002 4 года назад
did you a console.log under the snapshot.params? to verify if u get the id param?
Далее
Subscribe to angular route parameter changes
9:48
Просмотров 31 тыс.
Angular read query string parameters
9:16
Просмотров 28 тыс.
ПРОВЕРИЛ АРБУЗЫ #shorts
00:34
Просмотров 949 тыс.
Что нового в 11.2?
58:32
Просмотров 59 тыс.
Minecraft Pizza Mods
00:18
Просмотров 1,7 млн
Angular content projection
15:38
Просмотров 36 тыс.
Angular route params
10:57
Просмотров 45 тыс.
Google Data Center 360° Tour
8:29
Просмотров 5 млн
Angular services tutorial
13:52
Просмотров 170 тыс.
Angular query params
10:18
Просмотров 50 тыс.
Самый быстрый пылесос!
0:30
Просмотров 14 тыс.
Choose a phone for your mom
0:20
Просмотров 7 млн
iPhone 15 Pro в реальной жизни
24:07
Просмотров 334 тыс.