filmov
tv
Angular 2 route parameters
Показать описание
Text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
Slides
Angular 2 Tutorial playlist
Angular 2 Text articles and slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
Tags
activatedroute angular2 params
activatedroutesnapshot
activatedroutesnapshot angular 2
activatedroutesnapshot get url
activatedroutesnapshot params
activatedroutesnapshot component
angular 2 pass parameter to route
angular 2 send parameter to component
In this video we will discuss passing parameters to routes in Angular. Let us understand this with an example. We want to make Employee Code on Employee List component clickable.
{ path: 'employees/:code', component: EmployeeComponent },
Next, in EmployeeListComponent, modify the [td] element that displays employee code to bind it to the route we created above using the routerLink directive as shown below.
[/a]
Explanation of the above code:
1. Notice in this example we are binding routerLink directive to an array.
2. This array is called link parameters array.
3. The first element in the array is the path of the route to the destination component.
4. The second element in the array is the route parameter, in our case the employee code.
getEmployeeByCode(empCode: string): Observable[IEmployee] {
}
Explanation of the above code:
1. This method takes employee code as a parameter and returns that employee object (IEmployee).
2. This method issues a GET request to the Web API service.
3. Once the Web API service returns the employee object, this mehod maps it to IEmployee type and returns it.
In one of our previous videos we have created EmployeeComponent to display employee details. When we created this component, we have hard coded employee data in the component itself. Now let's modify it
1. To retrieve employee details by calling the Angular EmployeeService method getEmployeeByCode() we created above.
2. This method calls the server side Web API service which retrieves that specific employee details from the database.
3. The employee code parameter is in the URL
4. To retrieve the parameter from the URL we are using the ActivatedRoute service provided by Angular
5. Since ActivatedRoute is provided as a service inject it into the constructor just like how we have injected EmployeeService
There are diiferent approaches to reterieve route parameters values. We will discuss all the different approaches and when to use what in our upcoming videos.
providers: [EmployeeService]
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
Slides
Angular 2 Tutorial playlist
Angular 2 Text articles and slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
Tags
activatedroute angular2 params
activatedroutesnapshot
activatedroutesnapshot angular 2
activatedroutesnapshot get url
activatedroutesnapshot params
activatedroutesnapshot component
angular 2 pass parameter to route
angular 2 send parameter to component
In this video we will discuss passing parameters to routes in Angular. Let us understand this with an example. We want to make Employee Code on Employee List component clickable.
{ path: 'employees/:code', component: EmployeeComponent },
Next, in EmployeeListComponent, modify the [td] element that displays employee code to bind it to the route we created above using the routerLink directive as shown below.
[/a]
Explanation of the above code:
1. Notice in this example we are binding routerLink directive to an array.
2. This array is called link parameters array.
3. The first element in the array is the path of the route to the destination component.
4. The second element in the array is the route parameter, in our case the employee code.
getEmployeeByCode(empCode: string): Observable[IEmployee] {
}
Explanation of the above code:
1. This method takes employee code as a parameter and returns that employee object (IEmployee).
2. This method issues a GET request to the Web API service.
3. Once the Web API service returns the employee object, this mehod maps it to IEmployee type and returns it.
In one of our previous videos we have created EmployeeComponent to display employee details. When we created this component, we have hard coded employee data in the component itself. Now let's modify it
1. To retrieve employee details by calling the Angular EmployeeService method getEmployeeByCode() we created above.
2. This method calls the server side Web API service which retrieves that specific employee details from the database.
3. The employee code parameter is in the URL
4. To retrieve the parameter from the URL we are using the ActivatedRoute service provided by Angular
5. Since ActivatedRoute is provided as a service inject it into the constructor just like how we have injected EmployeeService
There are diiferent approaches to reterieve route parameters values. We will discuss all the different approaches and when to use what in our upcoming videos.
providers: [EmployeeService]
0:23:10
Angular 2 route parameters
0:13:59
Angular 2 Tutorial - 33 - Route Parameters
0:09:21
Angular 2 Tutorial - 35 - Optional Route Parameters
0:05:06
Angular 2 Tutorial #18 - Route Params
0:11:17
Angular 2 Tutorial (2016) - Routing with Parameters
0:09:56
Angular Tutorial - 25 - Route Parameters
0:09:18
Angular 2 Tutorial - 34 - Params Observable
0:07:23
[Routing Angular 2 Application] Lesson 9 Route Parameters
2:21:55
Module 9 - Implementing Node HTTP Web Server APIs
0:07:41
Angular Tutorial - 27 - Optional Route Parameters
0:04:40
Understanding Route Parameters in Angular | Complete Guide for Beginners part 2
0:10:22
Angular read route parameters
0:13:28
Passing Parameters to Route | Angular Routing | Angular 13+
0:07:14
Route Parameters in Angular
0:10:40
36. Using Route Parameters in Angular
0:09:43
Angular optional route parameters
0:01:46
Configuring Angular Routes and Route Parameters | Angular Route | Chapter 5.2/10 | LearnCodeExpress
0:05:09
Learn Angular 2 From Beginner To Advanced - 53 - Route Parameters Part 1
0:07:54
Angular 2: how do I get route parameters from CanLoad implementation?
0:07:21
Angular required route parameter vs optional route parameter
0:10:49
Angular 9 Tutorial For Beginners #34 - Query Params in Routes
0:02:12
Angular 2 route with parameters re-initializing component onInit
0:05:49
Angular 10 Tutorial - Route Parameters
0:01:47
Angular 2+ - Master Google's Front-End Framework - Chapter 7: Routing URL Parameters In Angular
Комментарии