admin

Please wait...

create_new_folder Create a New Module

To create a new module, use the following Angular CLI command from your root directory. Replace <module-name> with your desired name.

ng generate module <module-name>

# Example:
ng generate module projects

add_circle New Page Generation

extension Add a Component to Module

To add a component to your feature module, use this command. This ensures the component is correctly registered within the module's scope.

ng generate component <module-name>/<component-name>

# Example:
ng generate component projects/project-list

format_list_numbered Implementation Steps

Example: Adding a 'Project List' page to the 'Projects' module.

1
Generate Component
ng g c project-list
Command Part Description
ng Angular CLI base command
g Generate - create something new
c Component - specify the type
project-list The name of your component
CLI output
2
Configure Module Routing

Define the route in projects.route.ts: 

export const PROJECTS_ROUTE: Route[] = [
    {
        path: 'project-list',
        component: ProjectListComponent,
    },
    { path: '**', component: Page404Component },
];
3
Update Sidebar Menu

Add the new menu item in assets/data/routes.json: 

{
    "path": "accounts/salary",
    "title": "Salary",
    "iconType": "material-icons-outlined",
    "icon": "payments",
    "class": "ml-menu",
    "groupTitle": false,
    "role": ["Admin"],
    "submenu": []
}
check_circle
Success! You can now access your new page at: http://localhost:4200/#/admin/accounts/salary
New page preview

link Referral Resources

Resource Link
Angular Lazy Loading Official Documentation