Login page
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
Make use of the "Render2" object to modify body classes.
Example:
Example:
Code: Select all
@Component({
selector: "app-login",
templateUrl: "./login.component.html",
styles: []
})
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");
}
}
is there something wrong with my code??
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');
}
}
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:
But in the login.html page of the example (assets/pages/login.html) you have something like this:
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:
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
Now in the "app-routing-module.ts" you can put something like this:
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).
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>
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>
- 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');
}
}
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
Code: Select all
<router-outlet></router-outlet>
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 {
}
}
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 {}
In this page you only have to place all the content you have (previously in the app.component.html and app.component.ts).
-
- Posts: 1
- Joined: 14 Sep 2011, 15:13
- Contact:
Thanks AitorGC. Your solution works for me, but for this solution needs write menu,topbar,footer layout to every inner html.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 0 guests