Problem in administrative layout when logging in (When going through ngIf jquery stops working)

0

I'm having problems with administrative layout + login. Both dashboard and login are at the same application level. When the user is redirected to the login he / she opens the screen that contains 3 component header, menu and application (Content opens the router-outlet login).

I did an eventEmitter to know if the user is logged in or not, if it is not going to be in the app.component.html and remove the menu, header and rodape 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 showMenu = true everything works, but when the showMenu = false and I'm redirected to the login, I inform the credentials and the showMenu becomes true again appearing the whole 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 header menu etc ...

Any tips on how to solve? I think it would be interesting to login to be independent of the admin application.

I know I did not explain the problem well, so I followed the 40-second video showing the error in practice.

Example on youtube

Follow 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' }
    ]
    
asked by anonymous 28.12.2018 / 15:32

1 answer

0
Speak man. In fact as you should know ngIf completely removes the DOM code, while the hidden simply hides it. What should be happening is that some lib that uses jquery is loaded and executed when your app loads, and when you put your code back into the DOM with ngIf, lib x will not load / execute again in your app understood? I know it's not the usual, but the ideal is not to use jquery or libs that are not suited for the Angular, otherwise you'll have to do some kind of "gambiarra" for everything to work as you expect.

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

Hug.

    
29.12.2018 / 13:18