-1

In my angular application for small devices the sidebar toggling is working but I want to to close or hide the sidebar when we click on anywhere on the page(i.e body).

.component.html

<nav class="sidebar sidebar-offcanvas active" id="sidebar">
    <ul class="nav">
        <li class="nav-item nav-profile">
            <a href="javascript:;" class="nav-link">

                <div class="nav-profile-image">

                    <img src="assets/images/bbbs2.png" alt="profile">

                    <span class="login-status online"></span>
                    <!--change to offline or busy as needed-->
                </div>
                <div class="nav-profile-text">
                    <span class="font-weight-bold mb-2" style="color: #00B5B8"></span>

                </div>

            </a>
        </li>
        <li class="nav-item" [ngClass]="{ 'active': dashboard.isActive }">
            <a class="nav-link" routerLink="/dashboard" routerLinkActive #dashboard="routerLinkActive">
                <span class="menu-title" style="color: #00B5B8">Dashboard</span>
                <i class="mdi mdi-home menu-icon" style="color:#00B5B8"></i>
            </a>
        </li>
// --and some more sidebar tabs

Now I want to remove the sidebar when the class is not active (class name is active).

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Haritha
  • 77
  • 2
  • 10
  • you can use `ngIf` to achieve this, you can evaluate the condition based on the body click that you want – stark Dec 23 '20 at 09:21
  • The general method is outlined here: https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element Should be simple to adapt to angular. –  Dec 23 '20 at 09:22
  • Can you please edit the above code I am not sure exactly – Haritha Dec 23 '20 at 09:23

1 Answers1

0
<nav 
    class="sidebar sidebar-offcanvas" 
    [ngClass]="{'active': condition}"
    id="sidebar">...

In this way you can control if class "active" is inserted or not. The condition obviously is a boolean and you can control it by a click listener in the rest of your application.

... ...

Maybe you can use a service variable, localstorage, or a store...

mp92
  • 92
  • 5