Angular

📄Page Structure

../src/index.html

index.html
<!doctype html>
<html lang="en">
  <head>
    <title>Able Pro Angular Dashboard Template</title>
    <base href="/" />
    <!-- Meta -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="description"
      content="Able pro angular 18+ admin template made using Angular Material 17+ and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs."
    />
    <meta
      name="keywords"
      content="Admin templates, Angular Material Admin templates, angular 18+, Angular Material 17, Dashboard, Dashboard Templates, sass admin templates, html admin templates, Responsive, Angular16 Admin templates free download, premium Angular16 Admin templates download"
    />
    <meta name="author" content="CodedThemes" />
    <!-- theme style -->
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link rel="stylesheet" href="assets/fonts/inter/inter.css" id="main-font-link" />
  </head>
  <body class="mat-typography">
    <app-root></app-root>
  </body>
</html>

../src/app/app.component.html

app.component.html
<router-outlet>
    <!-- loadChildren from app-routing.module.ts with admin.component.html or auth.component.html -->
</router-outlet>

../src/app/app-routing.module.ts

app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AdminComponent } from './demo/layout/admin';
import { EmptyComponent } from './demo/layout/empty/empty.component';
import { GuestComponent } from './demo/layout/front/guest.component';
import { AuthGuard } from './@theme/components/helpers/auth.guard';
```

const routes: Routes = [
 {
    path: '',
    component: GuestComponent,
    children: [
     // load children modules with lazy load routing for without a common structure, like landing, contact-us, components, etc... 
    ]
  },
  {
    path: '',
    component: AdminComponent,
    children: [
      // load children modules with lazy load routing for header, side nav common structure, like, dashboard, blank page, widget, etc...
    ]
  },
  {
    path: '',
    component: EmptyComponent,
    children: [
     // load children modules with lazy load routing without a common structure, like login, signup, reset the password, maintenance, etc...
    ]
  },
  {
    path: '**',
    loadComponent: () => import('./demo/pages/maintenance/error/error.component').then((c) => c.ErrorComponent)
  }
];

../src/app/demo/layout/admin/admin.component.html

admin.component.html
<mat-drawer-container class="example-container" [dir]="direction">
  <mat-drawer #sidebar class="pc-sidebar" [mode]="modeValue" opened>
    <nav>
      <div class="navbar-wrapper">
        <div class="m-header">
          <a>
            <img src="assets/images/logo-dark.svg" />
          </a>
        </div>
        <app-vertical-menu *ngIf="ableProConfig.layout === 'vertical'" [menus]="menus"></app-vertical-menu> <!-- for side nav - vertical.component.html -->
      </div>
    </nav>
  </mat-drawer>
  <app-nav-bar></app-nav-bar>  <!-- for header - toolbar.component.html -->
  <div class="pc-container">
    <div class="coded-wrapper">
      <div class="coded-inner-content">
        <app-breadcrumb [dashboard]="true"></app-breadcrumb> <!-- for common breadcrumb - breadcrumb.component.html -->
        <div class="main-body">
          <div class="page-wrapper">
            <router-outlet>
            <!-- page main body - loadChildren as main page body from src/app/demo/pages/... -->
            </router-outlet>
          </div>
        </div>
      </div>
    </div>
  </div>
  <app-footer></app-footer> <!-- for common footer-->
</mat-drawer-container>
<app-configuration></app-configuration> <!-- for common configuration-->

../src/app/demo/layout/empty.component.html

empty.component.html
<router-outlet>
    <!-- loadChildren component for guest.component at app-routing.module.ts for authentication blank pages without nav, header, etc. -->
</router-outlet>
PreviousDirectory StructureNextTheme Configuration

Last updated