Angular – Different template structure on specific page

Published

I’m all new to Angular, and im currently trying to build a frontend, while learning to use Angular.

I have build a test-app where i am implementing authentication using an API i have writting.
The authentication works fine, however i an strugling wrapping my head around how to implement a specific functionallity.

Almost all of the app is locked behind authentication.
The idea is:
If a user visits any page in the app, while not logged in, the app should redirect the user to the login-page.
All of this works great.

However the login-page needs a totally different layout. No design elements from the "main design" is used on the login page. Even the css class on the body tag is different.

What would be the best way to solve this?

I have tried to do some *ngif in the app.component.html file, however that didnt work as expected.
Im also totally stomped on how to change the body-class in index.html.

I hope this makes any sense.

Im posting some sourcecode below. If more is needed let me know.

app.component.html:

   <ng-container *ngIf="accountService.currentUser$ | async">
        <app-preloader></app-preloader>
        <app-nav></app-nav>
        <app-sidebar></app-sidebar>
    
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <div class="content-header">
                <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                    <h1 class="m-0">Dashboard</h1>
                    </div><!-- /.col -->
                </div><!-- /.row -->
                </div><!-- /.container-fluid -->
            </div>
            <!-- /.content-header -->
    
            <!-- Main content -->
            <section class="content">
                <div class="container-fluid">
                    <router-outlet></router-outlet>    
                </div><!-- /.container-fluid -->
            </section>
            <!-- /.content -->
        </div>
        <app-footer></app-footer>
    </ng-container>
    
    <ng-container *ngIf="(accountService.currentUser$ | async) === null">
        <router-outlet></router-outlet>   
    </ng-container>

index.html:

  <!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Client</title>
      <base href="/">
      <!-- Google Font: Source Sans Pro -->
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
      <!-- Ionicons -->
      <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
    </head>
    
    <body class="hold-transition sidebar-mini layout-fixed">
      <app-root></app-root>
    </body>
    </html>

app.routing.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './main/main.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { AuthGuard } from './_guards/auth.guard';

const routes: Routes = [
  {
    path: '',
    runGuardsAndResolvers: 'always',
    canActivate: [AuthGuard],
    children: [
      {path: '', component: MainComponent},
      {path: 'user', component: UserComponent}
    ]
  },
  {path: 'login', component: LoginComponent},
  {path: '**', component: MainComponent, pathMatch: 'full', canActivate: [AuthGuard]},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Source: Angular Questions

Published
Categorized as angular, authentication, css, user-interface Tagged , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq