ClarityNg: how to close sidenav on click button inside

Question

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?

Answer 1

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.