{"flag":true,"single":true,"pageTitle":"Routing in Angular | Angular Router | Angular 15+","post":{"id":77,"user_id":"1","slug":"routing-in-angular-angular-router-angular-15--z1za","title":"Routing in Angular | Angular Router | Angular 15+","body":"<p>we can create routing in app.module.ts or seprate file<\/p>\r\n<p>let suppose we have two components&nbsp; <strong>HomeComponent, AboutusComponent<\/strong><\/p>\r\n<p>1.Goto app\/app.module.ts and define routes + import routes module +import it<\/p>\r\n<pre class=\"language-markup\"><code>import {  RouterModule, Routes } from '@angular\/router';<\/code><\/pre>\r\n<pre class=\"language-markup\"><code>const routesare:Routes=[\r\n  \/\/{path:'',component:HomeComponent},\r\n  {path:'',redirectTo:'home',pathMatch:'full'},\r\n  {path:'home',component:HomeComponent},\r\n  {path:'about',component:AboutusComponent},\r\n]<\/code><\/pre>\r\n<pre class=\"language-markup\"><code> imports: [\r\n    RouterModule.forRoot(routesare)\r\n  ],<\/code><\/pre>\r\n<p>in app.component.html remove &lt;app-home&gt;&lt;\/app-home&gt;, &lt;app-aboutus&gt;&lt;\/app-aboutus&gt; and add the following code<\/p>\r\n<pre class=\"language-markup\"><code>&lt;router-outlet&gt;&lt;\/router-outlet&gt;<\/code><\/pre>\r\n<p>Now visit <a href=\"http:\/\/localhost:4200\/home\">http:\/\/localhost:4200\/home<\/a><\/p>\r\n<p>&nbsp;<\/p>","category_id":"13","is_private":"0","created_at":"2023-03-29T01:24:25.000000Z","updated_at":"2023-03-29T01:24:25.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":"we can create routing in app.module.ts or seprate file let suppose we have two components&nbsp; HomeComponent, AboutusComponent 1.Goto app\/a - Routing in Angular | Angular Router | Angular 15+ (Updated: March 29, 2023) - Read more about Routing in Angular | Angular Router | Angular 15+ at my programming site [SITE]","categories":[]}