Error: Missing provider for MatBottomSheetRef

While experimenting in this StackBlitz, I encountered the following error message (even though the MatBottomSheetModule is imported):

        ERROR
        Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        StaticInjectorError(Platform: core)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        NullInjectorError: No provider for MatBottomSheetRef!

Any thoughts on how to resolve this issue?

Request for Angular / Components Feature

If you agree with the proposal, feel free to vote for it. I suggested making the usage symmetrical compared to other similar Angular components/services.

Check out the feature request here

javascriptangulartypescriptangular-material

Answer №1

If you are missing providers for the Bottom Sheet, follow these steps:

Update your material.module.ts as shown below:

import {MatBottomSheetRef, MAT_BOTTOM_SHEET_DATA} from '@angular/material/bottom-sheet';

@NgModule({
  exports: [...]
  providers: [
    { provide: MatBottomSheetRef, useValue: {} },
    { provide: MAT_BOTTOM_SHEET_DATA, useValue: {} }
  ],
})

To ensure better performance and minimized bundles when using webpack, make this change in the country-code-select.component.ts file:

// Removed -1
// import { MatBottomSheetRef } from '@angular/material'; 


//Added +1
import { MatBottomSheetRef} from '@angular/material/bottom-sheet';

You can access the Stackblitz example for reference here:

https://stackblitz.com/edit/angular-material-baseline2-country-code-select-6hisdk

With these updates, you are good to go. Cheers!

Answer №2

The solution provided above is effective, however, it may result in the error message 

this._bottomSheet.open is not a function
. To address this issue, simply follow these steps:

import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
in either your component module or app module and add it to the list of imports.

@NgModule({
  imports: [
    ...,
    MatBottomSheetModule,
    ...,
  ],
  declarations: [...],
})

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

Inconsistencies in latency experienced when making calls to Google Sheets V4 API

Recently, I've been encountering latency issues with the following code: var latency = Date.now(); const sheetFile = await google.sheets({version: 'v4', auth}); var result = await sheetFile.spreadsheets.values.get({spreadsheetId: shee ...

javascriptnode.jsherokugoogle-sheets-api

Tips on creating a subsequent post for a file that has been uploaded to a Node Express server and then forwarded to a different API

We are currently working with an Express server in Node, where we upload a file on one route and then need to send this file to another endpoint for processing. However, the file is not stored locally on the server; it exists as an uploaded object. I&apos ...

javascriptnode.jsexpressfile-uploadmulter

The argument type 'MouseEvent<HTMLButtonElement, MouseEvent>' cannot be assigned to the parameter type 'HTMLElementEvent<HTMLButton>'

Here is the code snippet that I am currently working on and encountering an error in the console: type HTMLElementEvent<T extends HTMLElement> = Event & { target: T; } toggleHandler = (e: HTMLElementEvent<HTMLButtonElement>) => ...

reactjstypescript

The ES6 alternative to require() when not using exports

When I utilize require(./filename), I am able to include and run the code within filename without any explicit export being defined inside filename. In ES6, what is the equivalent of this using import ? Appreciate it ...

javascriptnode.jsecmascript-6requirejavascript-import

Storing Boolean values in MongoDB with Express JS: A Step-by-Step Guide

I am encountering an issue where a Boolean value that I am trying to store in Mongodb always returns false. Below is the schema of my database: const UserSchema = new Schema({ name: String, password: { type: String, required: true }, isAdmi ...

javascriptnode.jsmongodbexpress

Is it possible to utilize the @next/env package within the next.config.js file?

I'm looking to access the environment configuration from next.config.js in order to utilize some environment variables specified in .env.local and establish server runtime configurations based on them. Is it appropriate to use next.config.js for this ...

javascriptnext.js

Transferring data from JavaScript to PHP for geolocation feature

Hello everyone, I'm looking to extract the longitude and latitude values from my JavaScript code and assign them to PHP variables $lat and $lng. This way, I can retrieve the city name and use it in my SQL query (query not provided). Below is the scrip ...

javascriptphphtml

Using cookies for authentication in Angular 5

Currently, I am in the process of building a website with Angular 5 and Express JS. One issue I am facing is that after a successful login, the access_token cookie is being sent from the server to the client. Although the cookie is successfully set in th ...

phpangularexpressangular5

Mastering the proper implementation of OneToMany and ManyToOne relationships in MongoDB involves understanding and utilizing the

I am currently working on setting up a oneToMany, ManyToOne relation method and here is my progress so far (pseudocode provided below). I am using Typegoose which is essentially Mongoose with types. If you are unfamiliar with it, that's okay because t ...

mongodbtypescriptmongoose

What exactly does Apple consider as a "user action"?

In the midst of my current web project, I am facing a challenge with initiating video playback after a swipe event. Despite utilizing the HTML5 video player and JavaScript to detect swipes, I have encountered difficulties in achieving this functionality. I ...

javascriptioshtmlvideo

Angular Igx-calendar User Interface Component

I need assistance with implementing a form that includes a calendar for users to select specific dates. Below is the code snippet: Here is the HTML component file (about.component.html): <form [formGroup]="angForm" class="form-element"> <d ...

javascriptangularhtmltypescriptbootstrap-4

What is the best way to load a partial in Rails asynchronously with AJAX?

I am currently using the following code to load a partial when I reach the bottom of a div containing a table: $(document).ready(function () { $("#pastGigs").scroll(function () { if (isScrollBottom()) { $('#pastGig ...

javascriptjqueryruby-on-railsajaxasynchronous

How can I make the burger icon responsive and centered in my navbar?

Struggling to center the burger icon in the navbar has been a bit of a challenge for me. Although it appears centered on small mobile devices, the icon shifts to the upper side on larger screens like tablets, losing its centered position. I am seeking advi ...

javascripthtmlcssbootstrap-4icons

Retrieving Gravity Forms AJAX Confirmation Message programmatically in JavaScript instead of displaying it

I have set up the Gravity Forms plugin in my Wordpress website and implemented the AJAX feature on my form. Currently, upon submission, a Confirmation message is displayed automatically. However, I am interested in retrieving the content of this message us ...

javascriptajaxwordpressgravity-forms-plugin

Incorrect Reactjs installation technique

When I try to run create-react-app on my Windows PC, only dependencies are being installed with no folders other than node_modules. Even when using Yarn, I haven't been able to progress further. Please assist and thank you in advance for any help. Thi ...

javascriptnode.jsreactjs

Adjusting a NodeJS module for easier integration into codebases

I have organized some functions in a file within a node module structure... Here are the files and folder structure I created: - package.json - README.md - LICENSE.md - code |_______ code.js Currently, to use these functions, I include them like th ...

javascriptnpmnode-modules

Having difficulties showing selectors content in Cheerio

Seeking assistance with extracting a table from a website, specifically trying to retrieve all the columns first. When I make the request and load the html into cheerio, I am facing an issue where the selector content does not display anything on the conso ...

javascriptnode.jsweb-scrapingrequestcheerio

The issue of Vue.js template errors within inline code

I am experimenting with using inline-template in combination with vue.js 2.0. This usage is within the context of Laravel blade 5.4: <users inline-template> <tbody> @foreach($users as $user) <tr> ...

javascriptlaravelvue.js

Exploring the Interplay of Classic ASP and AJAX Variables References

When the page loads, I check for an empty session variable. If it is empty, I trigger an AJAX function to include a hidden login form with ASP script that becomes visible through JavaScript. This part of the process works smoothly. Upon submitting the for ...

javascriptajaxasp-classic

Tips for streamlining the filter function using replace and split:

Currently, I am utilizing a filter function alongside replace() and split(). Here is the code snippet: jQuery('table .abc').filter((i, el) => jQuery(el).text(jQuery(el).text().replace('a', 'b').split(' ')[0] + &ap ...

javascriptjqueryfilterreplacesplit