Avoid automatically opening mat-sidenav upon page load

Utilizing a BehaviorSubject in my service for mat-sidenav toggle has proven to be effective.

toggle-service.ts

    export class ToggleSidenavService {
       public sideNavToggleSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);

       public toggle() {
          return this.sideNavToggleSubject.next(null);
       }
    }

Component.html

      @ViewChild('sidenav', {static: true}) public sidenav: MatSidenav;

     ngOnInit() {
        this.sidenavService.sideNavToggleSubject.subscribe(() => {
        this.sidenav.toggle();
       });
     }

Although the Sidenav toggle functionality is working as intended, it consistently opens when the page first loads. How can I address this issue?

Answer №1

In order to guarantee that the Sidenav remains closed when the page is initially loaded, make sure to set the opened property to false within the HTML template.

<mat-sidenav #sidenav mode="side" opened="false">
  Sidenav content
</mat-sidenav>

If you need to close the Sidenav programmatically, you have the option to invoke the close() method in the ngAfterViewInit() function, although this step may not be necessary if opened has already been configured accordingly.

@ViewChild('sidenav', {static: true}) public sidenav: MatSidenav;

ngAfterViewInit() {
    this.sidenav.close();
}

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

Having trouble getting TypeScript to install using npm on a Mac?

My goal is to use Typescript as a local dependency by checking it into my devDependencies and using it via an npm script after installing it with 'npm install'. However, when I try this on my machine, I find that Typescript (and webpack-cli as w ...

Angular 5 in conjunction with Keycloak enabling access for non-authenticated users

I have a situation where I need to implement anonymous user access in my app, and for that purpose, I am incorporating the 'keycloak-angular' library along with Angular 5. The documentation instructs me to initialize the application as shown belo ...

The handler for the ActionSheet is unable to retrieve the class variable

Exploring the capabilities of the Ionic Framework, I delved into using ActionSheet and ActionSheetController for a Proof of Concept. Everything was functioning smoothly until I came across an unexpected error. When assigning a function as a handler that I ...

What is the best way to generate a unique UUID for every object created within a loop?

I am working on a typescript method that eliminates hashtags from a string and saves them in an array within a model. Each element in the hashtag array is assigned a unique UUID along with the complete string added to the model. However, I am facing an iss ...

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

Is there a way to disable a specific radio button based on a condition and display a tooltip only for that disabled button? https://i.stack.imgur.com/niZK1.png import {Tooltip} from '@mui/material'; <Tooltip titl ...

The process of declaring a nullable callback variable in TypeScript

Can the declaration of the resolve variable in the TypeScript code below be simplified while maintaining type safety? I am new to TypeScript, so please bear with me. The objective is to store the promise resolver callback that is passed to the executor fu ...

The AngularJS 2 TypeScript application has been permanently relocated

https://i.stack.imgur.com/I3RVr.png Every time I attempt to launch my application, it throws multiple errors: The first error message reads as follows: SyntaxError: class is a reserved identifier in the class thumbnail Here's the snippet of code ...

utilize a document within ngx Translate

I've been working on transitioning an app from AngularJS to Angular 4. As I gradually move components over, I'm encountering issues with translation. My goal is to continue using the old AngularJS translation alongside ngx-translate. Prior to ...

Tips for detecting changes in @Input values

There is a component that has the following input: @Input() list: Array<string> I want to know how I can detect when the parent component changes the value of this input. ...

Struggling with the testing of @Output functionality through Jasmine

I've encountered an issue while trying to test an @Output parameter in my Jasmine test for Angular 5. It seems that the button click isn't being registered, resulting in the event emitter not triggering. Here is a snippet of my component code: ...

Ngx-Chips: Autocomplete feature fails to refresh list upon receiving response

I have integrated the ngx-chips plugin into my project from ngx-chips. The dropdown list is currently being populated using an HTTP call to the server. Although the myContactList data in the view is getting updated, I am facing an issue where the dropdow ...

How can I retrieve the decimal x and y coordinates when the mouse is moved in Typescript Angular?

I am in the process of transitioning my user interface from Flash/Flex, where it stores values in decimal format. I need to access and reuse these values. Here is a demo showcasing my problem. Here is a snippet: import { Component, Input } from '@an ...

How to exit a dialog in an Angular TypeScript component with precision

Hey there, I'm attempting to close a dialog from the component by specifying the path in .angular-cli.json and calling the function. However, it seems that despite my efforts, the dialog isn't closing and the redirection isn't happening. He ...

Fixing the error "cannot call a function which is possibly undefined" in React and TypeScript

Seeking a resolution to the error "cannot invoke an object which can possibly be undefined" by utilizing react and typescript. What is the issue at hand? The problem arises when using the useContext react hook to create a variable (dialogContext) in compo ...

Sending JSON information from the App Component to a different component within Angular 6

I am faced with a challenge involving two components: 1. App Component 2. Main Component Within app.component.ts: ngOnInit () { this.httpService.get('./assets/batch_json_data.json').subscribe(data => { this.batchJson = data ...

What steps should I take to address the issue of sanitizing a potentially harmful URL value that contains a

I've encountered a URL sanitization error in Angular and despite researching various solutions, I have been unable to implement any of them successfully in my specific case. Hence, I am reaching out for assistance. Below is the function causing the i ...

Strategies for evaluating a Promise-returning imported function in Jest

I am currently facing an issue with a simple function that I need to write a test for in order to meet the coverage threshold. import { lambdaPromise } from '@helpers'; export const main = async event => lambdaPromise(event, findUsers); The ...

Combining RxJS Observables through interval operations

Hey everyone, I have a question for the community! Currently, I am developing an app that communicates with an API in the following manner: Step 1: Create request options and add request payload --> Send a POST request to the API The API responds with ...

Typescript Mongoose is unable to recognize an incorrect key

When working with typescript and mongoose, I encountered an issue where mongoose was unable to detect invalid keys and changed all typescript keys to partial. model.ts type Coin = { symbol: string; name: string; } interface IDocument extends Coin ...

Troubleshooting: The issue of importing Angular 2 service in @NgModule

In my Angular 2 application, I have created an ExchangeService class that is decorated with @Injectable. This service is included in the main module of my application: @NgModule({ imports: [ BrowserModule, HttpModule, FormsModu ...