Angular - Different template structure on specific page

Question

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 { }

Does this help? https://stackoverflow.com/questions/54955235/angular-conditional-div-container-around-router-outlet — Meqwz, Oct 13 '21 at 23:41

score 0 · Accepted Answer · answered Oct 14 '21 at 05:58

For this you can create Layout module and create your Inside and Outside layout component and add <router-outlet></router-outlet> in both components and then in your app-routing.module.ts file create route like this

 {
    path: '',
    component: OutsideLayoutComponent,
    canActivate: [ExternalAuthGuard],
    children: [
      { path: '', loadChildren: './modules/auth/auth.module#AuthModule' },
    ]
  },

  {
    path: '',
    component: InsideLayoutComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'ticket', loadChildren: './modules/ticket-retrieval/ticket-retrieval.module#TicketRetrievalModule' }
      { path: 'error', component: GenericErrorPageComponent },
      { path: 'invalid-session', component: InvalidSessionPageComponent },
      { path: 'un-authorized', component: UnAuthorizedComponent }
    ]
  },

You need to create AuthGuard, and authguard will handle user is login or not based on that redirect user to specific page. And base on routes layout will be set.

NOTE: You must have basic understanding of Angular LazyLoding

Thanks, that looks like it is what i need. However i still have the issue of needing to change th class depending on with layout is choosen. Any ideas on how to solve that? — Glacierdk, Oct 14 '21 at 22:55

Angular - Different template structure on specific page

1 Answers1