{"flag":true,"single":true,"pageTitle":"Passing Parameters to Route | Angular Routing | Angular 15+","post":{"id":80,"user_id":"1","slug":"passing-parameters-to-route-angular-routing-angular-15--g4ls","title":"Passing Parameters to Route | Angular Routing | Angular 15+","body":"<p>1.open file <strong>app\/app-routing.module.ts<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>const routes: Routes = [\r\n  {path:'',redirectTo:'home',pathMatch:'full'},\r\n  {path:'home',component:HomeComponent},\r\n  {path:'home\/:name',component:HomeComponent},\r\n];<\/code><\/pre>\r\n<p>2.open file home.component.ts<\/p>\r\n<pre class=\"language-markup\"><code>export class HomeComponent {\r\n  name:any = '';\r\n  constructor(private activated_route:ActivatedRoute){ \/\/get current activated route\r\n  }\r\n  ngOnInit(){\r\n    this.name = this.activated_route.snapshot.paramMap.get('name');\r\n  }\r\n}<\/code><\/pre>\r\n<p>3.open home.component.html<\/p>\r\n<pre class=\"language-markup\"><code>&lt;div&gt;\r\n    This is new user {{name}}\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p>4. visit the url&nbsp;<\/p>\r\n<p><a href=\"http:\/\/localhost:4200\/home\/john\">http:\/\/localhost:4200\/home\/john<\/a><\/p>","category_id":"13","is_private":"0","created_at":"2023-03-29T03:33:49.000000Z","updated_at":"2023-03-29T03:33:49.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"1.open file app\/app-routing.module.ts const routes: Routes = [   {path:'',redirectTo:'home',pathMatch:'full'},   {path:'home',component:Home - Passing Parameters to Route | Angular Routing | Angular 15+ (Updated: March 29, 2023) - Read more about Passing Parameters to Route | Angular Routing | Angular 15+ at my programming site [SITE]","categories":[]}