<button mat-icon-button><mat-icon (click)="drawer.toggle();">menu</mat-icon></button>
Upon clicking, the drawer.toggle() function is invoked. However, my requirement is to trigger
drawer.toggle() on the first click
and
drawer2.toggle() on the second click
I am uncertain how to achieve this behavior.
To access your drawers, utilize the ViewChild feature.
Incorporate the following code in your template:
<button mat-icon-button (click)="handleClick();><mat-icon>menu</mat-icon></button>
<my-drawer-one #myDrawerOne></my-drawer-one>
<my-drawer-two #myDrawertwo></my-drawer-two>
Add this code to your component:
import { ViewChild, ... } from '@angular/core';
...
@ViewChild('myDrawerOne') drawer;
@ViewChild('myDrawerTwo') drawer2;
private clickCount: number = 0;
public handleClick(): void {
this.clickCount++;
if(this.clickCount === 1) {
this.drawer.toggle();
return;
}
this.clickCount = 0; // Reset click count when needed
this.drawer2.toggle();
}
This process can also be simplified.
What could be the issue in my code? I am attempting to utilize cordova-camera-plugins and Ionic native with Ionic 2, but upon running ionic serve, I encounter this Runtime Error: "Can't resolve all parameters for HomePage: ([object Object], [object Ob ...
Currently, I am in the process of uploading an excel file that contains an ID column as its first column. My goal is to extract all the IDs and store them in an array for future data management purposes. To accomplish this task, I am utilizing the XLSX l ...
TypeScript is a language known for being statically typed, giving it the ability to verify types during the compilation process and translate the code into JavaScript. Considering this, how is it possible for VS Code to detect type errors without the code ...
I am facing an issue while trying to access an uploaded file from the spring boot controller, as I am receiving an error message stating: com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of springframework.web.multi ...
I have two main components - home and about. Within both of these, I am including a third component called hearts. Currently, I am manipulating the value of the 'age' property in the hearts component (initially set to '23') using @ViewC ...
I am currently working on creating a versatile search bar with Angular material ui. After looking through the documents, I couldn't find a specific 'search' component. Have any of you utilized material ui for implementing a search feature? D ...
Below is an example I'm working with: https://codesandbox.io/s/material-ui-card-styling-example-lcup6?fontsize=14 I am trying to add additional menu options such as Edit and Delete to the three dots menu link, but so far I have not been successful. ...
Currently, I am working on developing a registration page for users using react-hook-forms for the registration form and zod for validation. Initially, when testing the form, I noticed that errors only appeared after submitting the form. However, once the ...
The challenge In my Angular 11 web app, I am trying to troubleshoot and inspect the variables within the HTML code. While I have managed to retrieve the ctx.ngForOf variable, I feel like there is something missing in my process that I can't quite pi ...
Is there a way to remove the squiggly green line that appears while editing an Angular 2+ >= v2 (v2 or higher) project's HTML template, without altering the template itself? For example, consider the following line of code: <textarea [(ngModel) ...
Having an angular 10 application with a routing resolver added to one of its components. Upon navigating to the resolver-added component through a different service, it has been noticed that the routing resolver is being called twice for each request. The ...
Having trouble displaying the JSON values of certain properties on screen. Utilizing Angular Material table to showcase my JSON response. The code snippet below is responsible for rendering the JSON data: <mat-card-content class="dashboard-card-cont ...
It is commonly known that directly modifying this.state is not recommended, and instead setState should be used. Following this logic, I assumed that prevState should also be treated as immutable, and setState should always involve creating a new object i ...
Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...
Here is a scenario to consider export class X{ y():void{} z():void{} } I am currently in Module N I need to utilize method y() and z() within module N, but I want to restrict access to method y() from other modules while still allowing acces ...
I recently developed a Twitch Chat Bot using Dockerized (docker compose), Node.js v16 with express. To create an authorize-page for users to authorize my bot on the Twitch API, I utilized the route /auth/request: this.serverUrl = serverUrl; this.port = po ...
Having trouble getting the click event to work for an element reference in typescript. Can anyone provide guidance on how to properly write a click event for an element reference? app.component.ts: @ViewChild('testElem') el:ElementRef; @Vie ...
I am looking to implement a setter method to update my form. When should I invoke the setter method? Below is the code snippet from my component.ts: export class UpdateZoneComponent implements OnInit { profileForm: FormGroup products: any; h: number; c ...
I'm feeling a bit lost when it comes to setting up React Material-UI theme. Even though I've tried to keep it simple, it's not working out for me as expected. Here is the code snippet I have: start.tsx const theme = createMuiTheme({ ...
While running my Unit Tests in watch mode, Chrome abruptly closed, preventing me from being able to run 'ng test' anymore. This is a situation that has never happened before during the past year of working on these tests. The issue I encountered ...