Angular 2 route parameters



0
90788

Text version of the video http://csharp-video-tutorials.blogspot.com/2017/08/angular-2-route-parameters.html 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. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 Slides http://csharp-video-tutorials.blogspot.com/2017/08/angular-2-route-parameters_16.html Angular 2 Tutorial playlist https://www.youtube.com/playlist?list=PL6n9fhu94yhWqGD8BuKuX-VTKqlNBj-m6 Angular 2 Text articles and slides http://csharp-video-tutorials.blogspot.com/2017/06/angular-2-tutorial-for-beginners_12.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists 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. When we click on an Employee code, we want to redirect the user to Employee Component which displays that specific employee details. In the URL we will pass the emploee code as a parameter. So clicking on EMP101 will redirect the user to URL (http://localhost/employees/emp101). The Employee component will then read the parameter value from the URL and retrieves that specific employee details by calling the server side web service. In our previous video we have modified the code in app.module.ts file to use hash style routing. Let's remove useHash property, so we are using HTML5 style routing instead of hash style routing. In the root application module (app.module.ts), include the following route. When the user navigates to a URL like (http://localhost:12345/employees/EMP101), we want to display EmployeeComponent. Notice the code parameter specified using colon (:). { 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 [routerLink]="['/employees', employee.code]"] {{employee.code | uppercase}} [/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. In the Angular EmployeeService (employee.service.ts), introduce the following getEmployeeByCode() method. getEmployeeByCode(empCode: string): Observable[IEmployee] { return this._http.get("http://localhost:24535/api/employees/" + empCode) .map((response: Response) =] [IEmployee]response.json()) .catch(this.handleError); } 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. Since we need EmployeeService both in EmployeeListComponent and EmployeeComponent, let's register it in the root module so we get a singleton instead of multiple instances of the service. We will discuss what is a Singleton in Angular and why is it important in our next video. For now, let's remove the EmployeeService registration from EmployeeListComponent by removing the following providers property in employeeList.component.ts file providers: [EmployeeService]

Published by: kudvenkat Published at: 6 years ago Category: علمی و تکنولوژی