Custom login page layout

Custom login page layout

Radzen application pages share the same layout - left-hand navigation and right-hand content. This help article shows how to make the login page have a custom layout.

  1. Create a a file called custom-app.component.ts in client\src\app with this content:

    import {Component} from '@angular/core';
    import {AppComponent} from './app.component';
     selector: 'app-root',
     templateUrl: './custom-app.component.html'
    export class CustomAppComponent extends AppComponent {}
  2. Create a file called custom-app.component.html in client\src\app with the following content:
  3. Create a file called custom-login.component.html in client\src\app\login. This is the file that will define the login page appearance. Here is some sample content:
    <div style="width: 500px; margin: 200px auto">
      <rz-login #login0 (login)="login0Login($event)" (register)="login0Register($event)">

    The required code is the <rz-login></rz-login> tag. The rest is up to you. The sample has only the login component centered on the screen.

  4. Open login.component.ts in client\src\app\login and change templateUrl to './custom-login.component.html'. This will tell the login component to use the custom layout created in the previous step.

    import {Component, Injector} from '@angular/core';
    import {LoginGenerated} from './login-generated.component';
      selector: 'login',
      templateUrl: './custom-login.component.html'
    export class LoginComponent extends LoginGenerated {
      constructor(injector: Injector) {
  5. Open app.module.ts and update it according to the comments:
    import {NgModule} from '@angular/core';
    import {RouterModule} from '@angular/router';
    // Import the login component modified in step 5.
    import {LoginComponent} from './login/login.component';
    // Import the page routes
    import {pageRoutes, popupRoutes} from './app.routes';
    import {
    } from './app.module-generated';
    // Import the custom app component created in step 1
    import {CustomAppComponent} from './custom-app.component';
    // Define custom routes
    export const customRoutes = [
        path: '',
        component: AppComponent,
        children: pageRoutes
        path: 'login',
        component: LoginComponent,
        data: {
          title: 'Login'
      declarations: [...AppDeclarations, CustomAppComponent],
      // Register the custom routes
      imports: [RouterModule.forRoot(customRoutes), ...AppImports],
      providers: [AppProviders],
      // Use the custom app component
      bootstrap: [CustomAppComponent]
    export class AppModule {}

Get Radzen

Sign-up to download the free 30-day Radzen trial.