Angular Routing

In a Single Page Application (SPA), all of your application's functions exist in a single HTML page. As users access your application's features, the browser needs to render only the parts that matter to the user, instead of loading a new page. This pattern can significantly improve your application's user experience.

You can configure your routes to lazy load modules, which means that Angular only loads modules as needed, rather than loading all modules when the application launches.

Preventing unauthorized access

Use route guards to prevent users from navigating to parts of an application without authorization. The following route guards are available in Angular:

CanActivate
CanActivateChild
CanDeactivate
Resolve
CanLoad

export class YourGuard implements CanActivate {
  canActivate(next: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean {
      // your  logic goes here
  }
}

note

Add RouterModule and AppRoutingModule inside app.module.ts

app-routing.module.ts

const indexRoute: Route = {
    path:'',
    component: HomeComponent
}

const fallbackRoute: Route = {
    path:'**',
    component: PageNotFoundComponent
}

const routes: Routes =[
    {
        path: 'action',
        loadChildren: () => import ('./modules/actions/action.module').then(m) => m.ActionsModule),
    },
    {
        path: 'client-profile',
        loadChildren: () => import ('./modules/client-profile/clientprofile.module').then(m) => m.ClientProfileModule),
    },
    { path: '',   redirectTo: '', pathMatch: 'full' }, 
    {
      path: '/your-path',
      component: YourComponent,
      canActivate: [YourGuard],
    },
    fallbackRoute,
    indexRoute
]


@NgModule({
    imports:[
        RouterModule.forRoot(routes,{
            onSameUrlNavigation: 'reload',
            useHash: true,
            relativeLinkResolution: 'legacy'
        })
    ],
    exports: [RouterModule]
})

export class AppRoutingModule{}

actions-routing.module.ts

const routes: Routes =[
    {
        path: 'list',
        component: ActionListComponent
    },
    {
        path: 'inquiry',
        component: ActionInquiryComponent
    },
    {
        path: 'create/:id/edit',
        component: ActionCreateComponent
    },


]
@NgModule({
    imports:[
        RouterModule.forChild(routes)
    ],
    exports: [RouterModule]
})

export class ActionRoutingModule{}

Pass data to other component using router

component1:
===========

editOutage(rowData: any) {
    let route = 'outage/create/1/edit';
    this.router.navigate([route], {state: {outageRowObj: rowData}})
}

component2:
===========
import { Router, ActivatedRoute, Navigation} from '@angular/router';
import { Subscription} from 'rxjs';

constructor(private router: Router, private route: ActivatedRoute) {
    let nav: Navigation = this.router.getCurrentNavigation();

    if(nav?.extras?.state !== undefined && nav?.extras?.state !== null){
        this.rowObjFromComponent1 = nav.extras.state.outageRowObj;
    }
}

export class TestComponent implements OnInit {
    subscription: Subscription
    title: string;
    // below logic to maintain one component for create and update
    ngOnInit() {

        this.subscription = this.route.params.subscribe((params) => {
            const id = +params['id];
            if(id === 0){
                this.title = 'Create'
            } else {
                this.title= 'Update'
            }
        })
    }
}

Pass data to other component using router​

Pass data to other component using router