Administrative layout problem when logging in (When going through ngIf jquery crashes)

Question

I am having problems with administrative layout + login. Both Dashboard and login are at the same application level. When the user is redirected to the login it opens the screen containing 3 Component header, menu and application (Content opens the router-outlet login) .

So I didn’t do an eventEmitter to see if the user is logged in or not, if not, I’ll go to the app.component.html and remove the menu,header and footer with ngif

<div id="container" [className]="mostrarMenu ? 'effect aside-float aside-bright mainnav-lg' : 'cls-container'" class="">

    <app-header *ngIf=(mostrarMenu)></app-header>
    <div class="boxed">
        <div  [id]="mostrarMenu? 'content-container':'content-container-login'"  class="aasdfasdfasdfasdf">
            <app-breadcrumb *ngIf=(mostrarMenu)></app-breadcrumb>

            <div [id]="mostrarMenu?'page-content':''">

                <hr class="new-section-sm bord-no">
                <div class="panel panel-body text-center">
                    <router-outlet></router-outlet>
                </div>
            </div>
        </div>

        <app-config *ngIf=(mostrarMenu)></app-config>
        <app-menu *ngIf=(mostrarMenu)></app-menu>
    </div>
    <app-footer *ngIf=(mostrarMenu)></app-footer>
    <!-- SCROLL PAGE BUTTON -->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
</div>
<app-snackbar></app-snackbar>

when I load the page and show it Nu = true everything works, but when shown it Nu = false and I am redirected to login, I inform the credentials and show it Nu becomes true again appearing all the layout, but with a certain problem in its functionality :(

if in place in ngif I put a [Hidden] it works, but the user can inspect element and return the header menu etc...

Any tips on how to solve? I think it would be interesting to log in independently of the admin application.

I know I didn’t explain the problem well, so follow the 40-second video showing the error in practice.

Youtube example

Follows app.Routes

  import { Routes } from '@angular/router'

    import { LoginComponent } from './security/login/login.component';

    import {LoggedInGuard} from './security/loggedin.guard'

    export const ROUTES: Routes = [
        // { path: '', component: HomeComponent ,canLoad:[LoggedInGuard]},
        { path: 'login/:to', component: LoginComponent},
        { path: 'login', component: LoginComponent},
        { path: '', loadChildren: './layout/home/home.module#HomeModule',canLoad:[LoggedInGuard],canActivate:[LoggedInGuard]},
        { path: 'mudar-texto', loadChildren: './mudar-texto/mudar-texto.module#MudarTextoModule',canLoad:[LoggedInGuard],canActivate:[LoggedInGuard]},

        { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' ,canLoad:[LoggedInGuard]},
        { path: '**', redirectTo: 'not-found', pathMatch: 'full' }
    ]

Answer 1

Talk guy. In fact, as you might know, ngIf completely removes the DOM code, while Hidden simply hides it. What should be happening is that some lib that uses jquery is loaded and executed when your app is loaded and when you put your code back into the DOM with ngIf, lib x will not load/run again in your application understood? I know it’s not common, but the ideal is not to use jquery or libs that are not adapted to Angular, if you will not always have to do some kind of "gambiarra" for everything to work as you expect.

I can’t help much because this problem is very specific, I would have to know about what you use and which packages are installed in your project.

Hug.