Create Multiple Angular Layouts for Admin and User Dashboard

 Sure. Below is a complete Angular Standalone example with separate HTML files for Admin, User, and Auth layouts.

Yes. In an Angular Standalone Application, you can create multiple layouts such as:

• Admin Layout → Sidebar + Header
• User Layout → User Header + Footer
• Auth Layout → Login/Register without sidebar

The clean approach is to create separate standalone layout components and use child

1. Folder Structure

src/app/
│
├── layouts/
│   ├── admin-layout/
│   │   ├── admin-layout.ts
│   │   ├── admin-layout.html
│   │   └── admin-layout.css
│   │
│   ├── user-layout/
│   │   ├── user-layout.ts
│   │   ├── user-layout.html
│   │   └── user-layout.css
│   │
│   └── auth-layout/
│       ├── auth-layout.ts
│       ├── auth-layout.html
│       └── auth-layout.css
│
├── pages/
│   ├── admin-dashboard/
│   │   ├── admin-dashboard.ts
│   │   └── admin-dashboard.html
│   │
│   ├── users/
│   │   ├── users.ts
│   │   └── users.html
│   │
│   ├── home/
│   │   ├── home.ts
│   │   └── home.html
│   │
│   └── login/
│       ├── login.ts
│       └── login.html
│
├── app.ts
└── app.routes.ts

---

2. Admin Layout

admin-layout.ts

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-admin-layout',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './admin-layout.html',
  styleUrl: './admin-layout.css'
})
export class AdminLayout {

}

admin-layout.html

<div class="admin-layout">

    <!-- Header -->
    <header class="header">
        <h2>Admin Panel</h2>

        <a routerLink="/auth/login">
            Logout
        </a>
    </header>


    <!-- Main Area -->
    <div class="main-area">

        <!-- Sidebar -->
        <aside class="sidebar">

            <h3>Menu</h3>

            <ul>
                <li>
                    <a routerLink="/admin/dashboard">
                        Dashboard
                    </a>
                </li>

                <li>
                    <a routerLink="/admin/users">
                        Users
                    </a>
                </li>
            </ul>

        </aside>


        <!-- Content -->
        <main class="content">

            <router-outlet></router-outlet>

        </main>

    </div>

</div>

admin-layout.css

.header {
    height: 60px;
    background: #222;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 20px;
}

.header a {
    color: white;
}

.main-area {
    display: flex;
    min-height: calc(100vh - 60px);
}

.sidebar {
    width: 220px;
    background: #eeeeee;
    padding: 20px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
    margin: 15px 0;
}

.sidebar a {
    text-decoration: none;
}

.content {
    flex: 1;
    padding: 30px;
}

---

3. User Layout

user-layout.ts

import { Component } from '@angular/core';
import { RouterOutlet, RouterLink } from '@angular/router';

@Component({
  selector: 'app-user-layout',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './user-layout.html',
  styleUrl: './user-layout.css'
})
export class UserLayout {

}

user-layout.html

<header class="header">

    <h2>My Website</h2>

    <nav>
        <a routerLink="/user/home">Home</a>
        &nbsp;
        <a routerLink="/auth/login">Login</a>
    </nav>

</header>


<main class="content">

    <router-outlet></router-outlet>

</main>


<footer class="footer">

    <p>© 2026 My Website</p>

</footer>

user-layout.css

.header {
    padding: 20px;
    background: #1976d2;
    color: white;

    display: flex;
    justify-content: space-between;
}

.header a {
    color: white;
}

.content {
    min-height: 500px;
    padding: 30px;
}

.footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 20px;
}

---

4. Auth Layout

Login page usually doesn't need Header/Sidebar.

auth-layout.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-auth-layout',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './auth-layout.html',
  styleUrl: './auth-layout.css'
})
export class AuthLayout {

}

auth-layout.html

<div class="auth-container">

    <div class="auth-box">

        <router-outlet></router-outlet>

    </div>

</div>

auth-layout.css

.auth-container {
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #eeeeee;
}

.auth-box {
    width: 400px;
    padding: 30px;
    background: white;
}

---

5. Admin Dashboard Page

admin-dashboard.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-admin-dashboard',
  standalone: true,
  templateUrl: './admin-dashboard.html'
})
export class AdminDashboard {

}

admin-dashboard.html

<h1>Admin Dashboard</h1>

<p>Welcome to Admin Dashboard.</p>

<hr>

<h3>Total Users: 150</h3>

---

6. Users Page

users.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-users',
  standalone: true,
  templateUrl: './users.html'
})
export class Users {

}

users.html

<h1>Users</h1>

<table border="1" cellpadding="10">

    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
    </tr>

    <tr>
        <td>1</td>
        <td>Rahul</td>
        <td>rahul@gmail.com</td>
    </tr>

    <tr>
        <td>2</td>
        <td>Amit</td>
        <td>amit@gmail.com</td>
    </tr>

</table>

---

7. User Home Page

home.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.html'
})
export class Home {

}

home.html

<h1>Home Page</h1>

<p>Welcome to our website.</p>

<p>This page is using User Layout.</p>

---

8. Login Page

login.ts

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [RouterLink],
  templateUrl: './login.html'
})
export class Login {

}

login.html

<h2>Login</h2>

<div>
    <label>Email</label>
    <br>

    <input type="email">
</div>

<br>

<div>
    <label>Password</label>
    <br>

    <input type="password">
</div>

<br>

<button>
    Login
</button>

<br><br>

<a routerLink="/user/home">
    Go to Website
</a>

---

9. Most Important Part — app.routes.ts

This is where we connect multiple layouts.

import { Routes } from '@angular/router';

import { AdminLayout } from './layouts/admin-layout/admin-layout';
import { UserLayout } from './layouts/user-layout/user-layout';
import { AuthLayout } from './layouts/auth-layout/auth-layout';

export const routes: Routes = [

    // =========================
    // ADMIN LAYOUT
    // =========================

    {
        path: 'admin',
        component: AdminLayout,

        children: [

            {
                path: 'dashboard',
                loadComponent: () =>
                    import('./pages/admin-dashboard/admin-dashboard')
                    .then(m => m.AdminDashboard)
            },

            {
                path: 'users',
                loadComponent: () =>
                    import('./pages/users/users')
                    .then(m => m.Users)
            }

        ]
    },


    // =========================
    // USER LAYOUT
    // =========================

    {
        path: 'user',
        component: UserLayout,

        children: [

            {
                path: 'home',
                loadComponent: () =>
                    import('./pages/home/home')
                    .then(m => m.Home)
            }

        ]
    },


    // =========================
    // AUTH LAYOUT
    // =========================

    {
        path: 'auth',
        component: AuthLayout,

        children: [

            {
                path: 'login',
                loadComponent: () =>
                    import('./pages/login/login')
                    .then(m => m.Login)
            }

        ]
    },


    // DEFAULT ROUTE

    {
        path: '',
        redirectTo: 'auth/login',
        pathMatch: 'full'
    }

];

10. app.ts

Your root component can be very simple:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <router-outlet></router-outlet>
  `
})
export class App {

}

11. app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {

    providers: [
        provideRouter(routes)
    ]

};

Final URL Structure

Now your application will work like this:

http://localhost:4200/auth/login
                    │
                    └── AuthLayout
                         └── Login

http://localhost:4200/user/home
                    │
                    └── UserLayout
                         ├── Header
                         ├── Home
                         └── Footer

http://localhost:4200/admin/dashboard
                    │
                    └── AdminLayout
                         ├── Header
                         ├── Sidebar
                         └── AdminDashboard

http://localhost:4200/admin/users
                    │
                    └── AdminLayout
                         ├── Header
                         ├── Sidebar
                         └── Users

⭐ The key concept

Think of the Layout as a parent component:

AdminLayout
│
├── Header
├── Sidebar
│
└── <router-outlet>
       │
       ├── Dashboard
       ├── Users
       └── Reports