Angular Structure

Overview

Index.html file Structure.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Toner eCommerce + Admin Angular 16 Template</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="../assets/images/favicon.ico">
</head>
<body>
    <app-root></app-root>
</body>
</html>

app.component.html file Structure.

<router-outlet></router-outlet>

app-routing.module.ts file Structure.

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

import { LayoutComponent } from './layouts/layout.component';

// Auth
import { AuthGuard } from './core/guards/auth.guard';

const routes: Routes = [
    { path: '', component: LayoutComponent, loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule), canActivate: [AuthGuard] },
    { path: 'auth', loadChildren: () => import('./account/account.module').then(m => m.AccountModule)  },
    { path: 'pages', loadChildren: () => import('./extraspages/extraspages.module').then(m => m.ExtraspagesModule), canActivate: [AuthGuard] },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts file Structure.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { LayoutsModule} from "./layouts/layouts.module";
import { PagesModule } from "./pages/pages.module";

// Auth
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS  } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
import { initFirebaseBackend } from './authUtils';
import { FakeBackendInterceptor } from './core/helpers/fake-backend';
import { ErrorInterceptor } from './core/helpers/error.interceptor';
import { JwtInterceptor } from './core/helpers/jwt.interceptor';

// Language
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';

export function createTranslateLoader(http: HttpClient): any {
    return new TranslateHttpLoader(http, '../assets/i18n/', '.json');
}

if (environment.defaultauth === 'firebase') {
    initFirebaseBackend(environment.firebaseConfig);
} else {
    FakeBackendInterceptor;
}

@NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
    TranslateModule.forRoot({
        defaultLanguage: 'en',
        loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
        }
    }),
    BrowserAnimationsModule,
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    LayoutsModule,
    PagesModule
    ],
    providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: FakeBackendInterceptor, multi: true },
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Layout setup (Backend + Components)

You can set the default layout in the src/app/layouts/vertical/vertical.component.ts file.

 ngOnInit(): void {
        document.documentElement.setAttribute('data-layout', 'vertical');
        document.documentElement.setAttribute('data-topbar', 'light');
        document.documentElement.setAttribute('data-sidebar', 'light');
        document.documentElement.setAttribute('data-layout-style', 'default');
        document.documentElement.setAttribute('data-bs-theme', 'light');
        document.documentElement.setAttribute('data-layout-width', 'fluid');
        document.documentElement.setAttribute('data-layout-position', 'fixed');
        document.documentElement.setAttribute('data-sidebar-image', 'none');
        document.documentElement.setAttribute('data-preloader', 'disable');
                                
  }

data-layout="vertical"	To set default layout as Vertical
data-layout="horizontal"	To set default layout as Horizontal
data-layout="twocolumn"	To set default layout as Two column
data-bs-theme="light"	To set Light layout mode.
data-bs-theme="dark"	To set Dark layout mode.
data-sidebar-size="lg" data-layout-width="fluid"	To set layout width Fluid and left sidebar large.
data-sidebar-size="sm-hover" data-layout-width="boxed"	To set layout width Boxed and left sidebar on hover show menu.
data-layout-position="fixed"	To set layout position Fixed.
data-layout-position="scrollable"	To set layout position Scrollable.
data-topbar="light"	To set the Light color of Topbar.
data-topbar="dark"	To set the dark color of Topbar.
data-topbar="brand"	To set the Brand color of Topbar.
data-sidebar-size="lg"	To set the Large left sidebar.
data-sidebar-size="md"	To set the Compact left sidebar.
data-sidebar-size="sm"	To set the Icon view left sidebar.
data-sidebar-size="sm-hover"	To set the Icon hover left sidebar.
data-layout-style="default"	To set the Default layout.
data-layout-style="detached"	To set the Detached layout.
data-sidebar="light"	To set the Light color of left Sidebar.
data-sidebar="dark"	To set the Dark color of left Sidebar.
data-sidebar="gradient"	To set the Gradient color of left Sidebar.
data-sidebar="gradient-2"	To set the Gradient-2 color of left Sidebar.
data-sidebar="gradient-3"	To set the Gradient-3 color of left Sidebar.
data-sidebar="gradient-4"	To set the Gradient-4 color of left Sidebar.
data-sidebar-image="none"	To Disable image on left Sidebar.
data-sidebar-image="img-1"	To set the img-1 Image of left Sidebar.
data-sidebar-image="img-2"	To set the img-2 Image of left Sidebar.
data-sidebar-image="img-3"	To set the img-3 Image of left Sidebar.
data-sidebar-image="img-4"	To set the img-4 Image of left Sidebar.
data-preloader="enable"	To enable the preloader on the Page.
data-preloader="disable"	To disable the preloader on the Page.