Fisrt step: Make a login component and modify index.html body class dynamically.
In the Demo example you have in the index.html something like this:
Code: Select all
<!doctype html>
<html>
<head>
....
</head>
<body> <!-- YOU MUST BE AWARE OF THIS -->
<app-root>
<div class="splash-screen">
<div class="splash-loader" />
</div>
</app-root>
</body>
</html>
But in the login.html page of the example (assets/pages/login.html) you have something like this:
Code: Select all
<!DOCTYPE html>
<html>
<head>
...
</head>
<body class="login-body"> <!-- SEE THE "LOGIN_BODY" class -->
<!-- BEGIN CONTENT OF THE LOGIN PAGE -->
...
<!-- END CONTENT OF THE LOGIN PAGE -->
</body>
</html>
So, you have to do an angular component for the login page.
- In the login.component.html: You must put all the content inside the body tag (of the assets/pages/login.html) but not the body itself.
- In the login.component.ts:
Code: Select all
import {Component, OnDestroy, OnInit, Renderer2} from '@angular/core';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit, OnDestroy {
constructor(
private renderer: Renderer2
) {
this.renderer.addClass(document.body, 'login-body');
}
ngOnInit() {}
ngOnDestroy(): void {
this.renderer.removeClass(document.body, 'login-body');
}
}
Now you have a login component who switch the body class on view init and restore it in the view destroy.
Second step: Extract the layout components of the app.component.html
If you check the app.component.html you will see it has all the components (header, footer, menu...) and you only need them in some pages.
You have to clean the app.component.html and use the layout components only when you need them.
For that I make the app.component my main router:
app.component.html
app.component.ts
Code: Select all
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit(): void {
}
}
Now in the "app-routing-module.ts" you can put something like this:
Code: Select all
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
// Pages
import { DashboardComponent } from "./pages/dashboard.component"; // It will have all the layout components
import { LoginComponent } from "./pages/login.component";
const routes: Routes = [{ path: "/login", component: LoginComponent }, { path: "/dashboard", component: DashboardComponent }];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
Third step: Make an example page with all layout components
In this page you only have to place all the content you have (previously in the app.component.html and app.component.ts).