Search code examples
angular-routingangular-component-routerangular-v7

Is it possible to use two routes in angular?


I do an Angular app using Angular7, and i try to use two "router-outlet" tag, For example I have two components "main" and "main2", that are halfly the same, they are routed in a parent component, and I want to route their differences in two 'children component, is it possible ? have you any way to explore ? Thanks ;)


Solution

  • Well, if I understand your questions very well. It is very possible as a case where you have login and dashboard, for instance

    const routes: Routes = [
        {
            path: '',
            pathMatch: 'prefix',
            redirectTo: 'auth/login'
        },
        {
            path: 'loading',
            component: LoadingComponent
        },
        {
            path: 'auth/login',
            component: LoginComponent
        },
        {
            path: 'auth/forgot-password',
            component: ForgotPasswordComponent
        },
        {
            path: 'auth/register',
            component: RegisterComponent
        },
        {
            path: 'auth/reset-password-temp',
            component: ResetPasswordComponent
        },
        {
            path: 'dashboard',
            component: AdminComponent,
            canActivate: [AuthGuard],
            children: [
                {
                    path: 'welcome',
                    component: WelcomeComponent
                },
                {
                    path: 'messages',
                    canActivate: [AuthGuard],
                    component: MessagesComponent
                },
                {
                    path: 'student-add',
                    component: StudentAddComponent
                },
                {
                    path: 'student-edit',
                    component: StudentEditComponent
                },
                {
                    path: 'student-view',
                    component: StudentViewComponent
                }
    
            ]
        }
    ];
    
    @NgModule({
        imports: [RouterModule.forRoot(routes, { useHash: true })],
        exports: [RouterModule],
        providers: []
    })
    export class RoutingModule {}
    

    With every component imported and correct path referencing