Tips for concealing the side menu on the login page in Angular 2

I am facing an issue with hiding the side-menu on my login page within my Angular2 application. The app component consists of a top menu, side menu, and router-outlet.

app.component.html

<div class="row content-container">
    <top-menu></top-menu>
    <side-menu></side-menu>
</div>
<div class="container">
    <router-outlet></router-outlet>
</div>

I currently hide the side-menu on the login page using *ngIf in side-menu.component.html as shown below.

side-menu.component.html

<div class="side-menu sidebar-inverse" background-color="black" *ngIf="isLoggedIn">
...
</div>

login.component.html

<div class="ui-g-12">
....
....
</div>

I tried embedding the entire HTML in login.component.html, but this method requires a browser refresh upon login and logout to show or hide the side menu, which is not ideal. I am seeking a more efficient way to hide the side-menu on my login page. I am using Angular-cli, Typescript, and Angular2. Any suggestions would be greatly appreciated. Thank you.

angulartypescriptangular-cli

Answer №1

To automatically update the isLogin variable, you can subscribe to router events in the rootComponent or parent component responsible for displaying the sidebar component. Here is some code to guide you:

//appComponent(root component)
<div class="wrapper">
<div *ngIf=isLoggedIn class="sidebar" data-background-color="white" data-active-color="danger">
    <sidebar-cmp></sidebar-cmp>
</div>
<div class="main-panel">
    <navbar-cmp *ngIf=isLoggedIn></navbar-cmp>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
    <footer-cmp></footer-cmp>
</div>

To subscribe to router events, the component should do the following:

import { Router, NavigationEnd } from "@angular/router";
import { Component } from "@angular/core";
import { OnInit } from "@angular/core";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  showNav: boolean;

  ngOnInit() {
    this.router.events.subscribe(e => {
      if (e instanceof NavigationEnd) {
        let urlSlice = e.url.toString().substr(0, 10);
        if (urlSlice.indexOf("login") !== -1) {
          console.log(urlSlice);
          this.isLoggedIn = false;
        } else {
          this.isLoggedIn = true;
        }
      }
    });
  }
  constructor(private router: Router) {
    this.showNav = true;
    this.showSideBar = true;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for resolving npm cache errors within an npm package module

Recently, as I was developing an Angular application, I faced some errors. Here's a snippet of the issues encountered: npm ERR! Unexpected end of JSON input while parsing near '...,"karma-qunit":"*","k' npm ERR! A complete log of this run c ...

angularnpm

The functionality of Angular 4 routing breaks down when attempting to access a direct URL path

Currently, I am working on an Angular 4 application that has numerous routes. The issue I am encountering is fairly straightforward to comprehend. All routing functions as expected within the app; however, a problem arises when accessing a specific URL dir ...

angularredirectangular2-routing

Using string interpolation within the innerHTML property in Angular 2

How do I render an expression using the [innerHTML] directive? public stringInterpolation: string = 'title'; public data: any = '<a>{{stringInterpolation}}</a>'; <div [innerHTML]="data"></div> The issue is th ...

angularangular2-template

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

I am facing a challenge with an HTML element that has dual roles: Automatically moving to the positive x-level whenever an Obsarbalve emits a new value. Moving manually to both positive and negative x-levels by dragging and dropping it. The manual drag a ...

javascripthtmlcssangulardrag-and-drop

The properties required for type 'Subscription' are not present

I encountered an issue in my IDE while trying to run the following code. Within my component, I am making a call to a service in the ngOnInit method to fetch some data. This service, in turn, calls another service to gather additional information before f ...

angulartypescriptobservable

Syntax for nested arrow functions in TypeScript

const fetchAsyncData = (input: { value: string }): AppThunk => async (dispatch) => { try { const fetchedData = await getData({ input.value }); } catch (error) { console.log(error); } }; An error message is displayed stating "No value ...

typescriptredux-thunk

Issue with memory leakage detected during compilation of Angular 12 application

My coworker and I are currently in the process of optimizing our Angular 12 application for our enterprise. The Issue: One major challenge we have encountered while developing our application is the continuous increase in memory usage each time the angul ...

angularnpmoptimizationmemory-leaksenterprise

Uncover hidden mysteries within the object

I have a function that takes user input, but the argument type it receives is unknown. I need to make sure that... value is an object value contains a key named "a" function x(value: unknown){ if(value === null || typeof value !== 'obj ...

typescript

Using Tailwind @apply within an Angular application's CSS file

I've noticed a yellow line appearing under the @apply in my CSS files, even though the styles are being applied correctly to the HTML components. This seems to be happening in every CSS file I use. Can anyone shed light on this issue? Removing these ...

cssangulartailwind-cssapply

Can we guarantee that the key and its corresponding value are both identical strings in Typescript?

Is it possible to enforce the key of a Record to be the same as the inner name value in a large dataset? interface Person<T> { name: T title: string description: string } type People = Record<string, Person<string>> // example dat ...

typescripttypescript-genericstype-constraints

Encoding and Decoding Base64 in Nativescript Using Angular 2

I've searched high and low for a solution but I can't seem to find one. Even after attempting to utilize atob() and btoa(), my efforts were futile. It seems that despite what intellisense suggests, these methods cannot be used. Additionally, plug ...

angularnativescript

Can you explain the distinction between 'rxjs/operators' and 'rxjs/internal/operators'?

When working on an Angular project, I often need to import functionalities like the Observable or switchMap operator. In such cases, there are two options available: import { switchMap } from 'rxjs/operators'; or import { switchMap } from ' ...

javascriptangulartypescriptimportrxjs

Sort the ngFor Angular loop by the start_date

Within the select available date section, there is an array of dates like the one shown in the image https://i.sstatic.net/NjN36.png. The following code uses ngFor: <div *ngFor="let date of tripdetail.trip_availabledate; let i = index;"> <a [ ...

angular

Removing a loaded stylesheet in Angular 4

One of the functions in my codebase is responsible for loading a stylesheet based on the user's language choice, whether it's 'en' or 'ar': addStyleSheet(lang: string) { let headID = document.getElementsByTagName(&apo ...

angular

Verify if the specified key is present in the type parameter and if it corresponds to the expected data type in the value parameter

I have a specific goal in mind: export interface GCLPluginConfig { [key: string]: string | number | boolean | Date | string[]; } export interface CorePluginConfig extends GCLPluginConfig { "core.lastUpdateCheck": Date; } export interface An ...

typescript

Issue with Nuxt: Property accessed during rendering without being defined on the instance

As I attempt to create cards for my blog posts, I encountered an issue with a Post component in my code. The cards are displaying like shown in the picture, but without any text. How do I insert text into these cards? Currently, all the text is within attr ...

javascripttypescriptvue.jsnuxt.js

Leveraging CSS nth-child selector in conjunction with ngFor in angular2

Looking for a way to style odd and even rows differently in my dynamically generated table using ngFor directive in angular2. *ngIf="AreThereMyOldMessages" *ngFor="let oldm of MyOldMessages;let i=index" *ngIf="AreThereMyNe ...

cssangularcss-selectors

Typescript error in React: The element is implicitly of type any because a string expression cannot be used to index type {}

I'm currently working on grouping an array by 'x' in my React project using TypeScript, and I've encountered the following error message: Element implicitly has an 'any' type because expression of type 'string' can&a ...

reactjstypescript

Every time I click on a single button, all the text inputs get updated simultaneously

One issue I encountered is with a component featuring increment and decrement buttons. These buttons are meant to interact with specific products, yet when clicked, all text inputs update simultaneously instead of just the intended one. COMPONENT HTML: &l ...

angulartypescript

Angular RxJS: Trigger an action upon subscribing to or unsubscribing from an observable

I'm in the process of converting some Javascript events into Observables using RxJS within an Angular application built on the Ionic framework. My goal is to begin listening for events when the "client" invokes .subscribe(), and then stop listening wh ...

javascriptangularionic-frameworkrxjsobservable