Search code examples
angularclarityvmware-clarity

ClarityNg: how to close sidenav on click button inside

I have a basic clarity angular template with search in sidenav. When I click find button in sidenav on mobile device, sidenav does not disappear. How I can close sidenav using angular?

Solution

  • The most straightforward solution would be for you to get a reference to the NavLevelDirective instance for the sidenav with @ViewChild, and all its close() method.

    For instance, add a reference variable in your template: 

    <nav #mySidenav class="sidenav" [clr-nav-level]="2">
    <app-sidebar></app-sidebar>
</nav>

    Then access it in your app's component by using:

    @ViewChild("mySidenav", {read: NavLevelDirective}) sidenav: NavLevelDirective;

    and just call sidenav.close() when the user clicks the "find" button.