Login page

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
AitorGC
Posts: 3
Joined: 25 Mar 2019, 17:34

27 Mar 2019, 22:53

I want to make a login page using "assets/pages/login.html" template, but with the current layout i just can't display it without menu, topbar, footer... How can I change between dashboard layout and full page?

AitorGC
Posts: 3
Joined: 25 Mar 2019, 17:34

05 Apr 2019, 20:47

Make use of the "Render2" object to modify body classes.

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");
  }
}

Haqqi20
Posts: 6
Joined: 03 Feb 2019, 07:23

06 Apr 2019, 19:49

I have tried, it hasn't been successful, :cry:
login-body ???
can you please help clarify?

Haqqi20
Posts: 6
Joined: 03 Feb 2019, 07:23

06 Apr 2019, 19:54

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');
    }

}

AitorGC
Posts: 3
Joined: 25 Mar 2019, 17:34

07 Apr 2019, 15:04

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

Code: Select all

<router-outlet></router-outlet>
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).

oguzhankinik
Posts: 1
Joined: 14 Sep 2011, 15:13
Contact:

20 Oct 2019, 15:47

Thanks AitorGC. Your solution works for me, but for this solution needs write menu,topbar,footer layout to every inner html.

Post Reply

Return to “Avalon - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests