sidenavbar not opening in mobile view angular 4

Question

I am trying to get my Angular 4 side navbar to open in a mobile view, but it is not opening.

Here is my code:

header.component.html

<nav class="navbar  bg-white   fixed-top  navbar-expand-lg "  id="sectionsNav">
   <div class="container">
        <div class="navbar-translate">              
            <a class="navbar-brand" href="#">                       
            <button type="button" class="navbar-toggle" (click)="sidebarToggle()">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>    
        <div class="collapse navbar-collapse" id="sidebar">
            <ul class="navbar-nav ml-auto">
                <li class="dropdown nav-item">
                  <a href="#/resident" class="nav-link" data-toggle="dropdown">
                      <i class="material-icons">apps</i> residents
                  </a>
                </li>
                <li class="dropdown nav-item">
                  <a href="#/socadminhome" class="nav-link" data-toggle="dropdown">
                      <i class="material-icons">view_day</i> Management
                  </a>
                </li>
                <li class="dropdown nav-item">
                    <a href="#fmhome" class="nav-link" data-toggle="dropdown">
                        <i class="material-icons">view_carousel</i> Manager
                    </a>                        
                </li>                    
            </ul>
        </div>            
    </div>
</nav>

header.component.ts

    import { Component, ElementRef, Input, ViewChild, OnInit  } from 
       '@angular/core';

      declare var $: any;

@Component({
    selector: 'app-header-cmp',
    templateUrl: 'header.component.html',
    styleUrls: ['header.component.css']
})

export class HeaderComponent implements OnInit {
    userId : any;
    currentUser : any;
    showLogin = 0;
    private toggleButton: any;
    private sidebarVisible: boolean;

    constructor(){
        this.userId = localStorage.getItem("userId");
        this.currentUser = localStorage.getItem("name");

        if(this.currentUser !== null && this.currentUser != 'null'){
            this.showLogin = 1;
        }else{
            this.showLogin = 0;
            this.currentUser = 'Sign In';
        }    
    }

    ngOnInit() { 

    }


    sidebarToggle() {
        $('#sidebar').toggleClass('active');
    };
}

I am able to see in the Elements tab of Chrome Developer Tools that the div is being shown as active when the toggle button is clicked. But the right menu is not opening up.

Any ideas on what changes needs to be done?

zer0 zer0 · Accepted Answer · 2018-12-02T04:49:38

Looks like bootstrap is expecting the class show and not active

$('#sidebar').toggleClass('show');

That being said, try and avoid using jQuery as much as you can (within Angular). It will lead to conflicts between jQuery and Angular.

A proper way to do this would be to use [class.show] in the HTML. So it would look something like this

HTML:

<div class="collapse navbar-collapse" id="sidebar" [class.show]="isShowSidebar">

TS:

isShowSidebar: boolean = false;
.
.
.
sidebarToggle(){
    this.isShowSidebar = !this.isShowSidebar;
}

sidenavbar not opening in mobile view angular 4

1 Answers