CODEWITHSUNDEEP
angular
vimal
vimal

Reputation: 31

How to separate admin and user area in angular

What is the beast way to separate admin and user panel in angular. is it possible to separate in single angular source or need to use separate angular source for each panels one source for user panel and another one for admin panel.

Upvotes: 2

Views: 5312

Answers (2)

redd77
redd77

Reputation: 337

There are 2 approaches to do so : -you may create one single layout and then add some logic to control the behavior of each component within your layout according to the role of the current user, example : control the navbar component to show or hide some options or links to other components that are only available to the user with role admin etc...
-my favorite is to create a module that contains the layout for each user and lazy load it on login so that you will implement only the layout necessary for each role , not forgetting about the shared module to declare common components . in this way it more clean but it requires double implementation for each user type .

Upvotes: 1

Federico Peñaranda
Federico Peñaranda

Reputation: 41

The best and easiest way to do this is to generate the components (panels) for each of the views that you need, and show them with routes, for example, if you need the login page for the admin panel (accessed by: domain.com/admin/login) you can create the login component (with angular CLI):

ng g c admin/login

and then show it with a route: (if you already have routing module already enabled, if you don't, you can enable it with the following tutorial: https://www.sitepoint.com/component-routing-angular-router/ or the official docs: https://angular.io/guide/router):

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from '../admin/login.component';

const adminRoutes: Routes = [
    {
        path: 'admin/login',
        component: LoginComponent
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(adminRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class AdminRoutingModule { }

When you need to use more routes, you just generate the new component (like the admin home page):

ng g c admin/home

and add it in the adminRoutes array:

...
const adminRoutes: Routes = [
    {
        path: 'admin/login',
        component: LoginComponent
    },
    {
        path: 'admin/home',
        component: HomeComponent
    }
];
...

To create a link to those routes you can create a router link in the template:

<a routerLink="/admin/login">Admin Login</a>

All this can get very complex, I advice to you that you do the Angular Docs tutorial to understand Angular more deeply: https://angular.io/tutorial

Upvotes: 0

Related Questions