The element 'mdb-range-input' is not recognized. To ensure that it is a valid Angular component, please confirm that it is included in this module

Trying to implement a md bootstrap slider using the following code:

<mdb-range-input (rangeValueChange)="onRangeValueChange($event)" id="range" min="0" max="100"></mdb-range-input>

The module imports section includes:

MDBBootstrapModule.forRoot(),

In angular.json, the scripts and styles are set as follows:

        "scripts": [
          "node_modules/jquery/dist/jquery.slim.min.js",
          "node_modules/popper.js/dist/umd/popper.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ],
        "styles": [
         "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/assets/sass/paper-kit.scss",
          "src/assets/css/demo.css",
          "src/assets/css/nucleo-icons.css",
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
"node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
"node_modules/animate.css/animate.css"
        ],

However, encountering an error message as shown below. Any suggestions on what might be causing this issue?

Error: Template parse errors:
'mdb-range-input' is not a known element:
1. If 'mdb-range-input' is an Angular component, then verify that it is part of this module.
2. If 'mdb-range-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Answer №1

Utilizing MDB Angular Free (angular-bootstrap-md) includes various components, however the mdb-range-input is exclusively available in the PRO package and not included in this particular one.

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

Verify using ngIf whether an Angular component is an array or not

Is it possible to target a specific component of an array rather than just checking for a variable in Angular? <div class="someComponent" *ngIf="someVariable"> For instance, how can I use the array component someArray[] with the ...

Fulfill several promises and execute an HTTP request in Angular 2

At this moment, I am in need of retrieving two elements from my storage, each providing me with a promise. The challenge lies in using these promises to create an HTTP request in Angular 2. Despite numerous attempts, I have been unsuccessful in finding the ...

Unable to execute function: Angular 7 Platform-Browser-Dynamic (intermediate value) share is not defined

Recently, I have been working on upgrading our Angular 5 build to version 7. After installing webpack 4, rxjs 6.3.3, and angular 7.0.3, along with taking care of dependencies, I managed to successfully compile the bundle. However, a puzzling error seems to ...

Angular: utilizing two ngFors to target and update specific sections of the DOM

I'm facing a challenge and unsure if it's achievable in Angular. Below is a simple HTML code snippet: <div > <div *ngFor="let item of apiNames, let i = index" class="rescontainer"> <div class="resbox headline"> ...

A guide to simulating a JQuery Ajax request with an Angular 2 component

We have a new project underway developing an angular 2 application. Our chosen framework for unit testing is Jasmine. I am currently working on creating my first unit test within this environment. The component we are testing makes an AJAX call to a web se ...

Restrict date range in Bootstrap Datepicker based on database values

Is there a way to remove specific date ranges from the database? For instance, if I have date ranges from 15.01.2021 to 21.01.2021 and from 24.01.2021 to 03.02.2021, is it possible to prevent these dates from being selected in the datepicker? I would lik ...

Show the user's email in the page header using AngularFire2 version 4.0

Attempting to showcase the user's email in my header component following the AngularFire 2 version 4.0 upgrade guidelines: https://github.com/angular/angularfire2/blob/master/docs/version-4-upgrade.md Header.component import { Component, OnInit } fr ...

Updating the sidebar component in Angular 11 post successful login

Recently, I delved into the world of Angular with a goal to learn more about its functionality. I encountered an issue with my sidebar component that remains static even after logging in: Click here to view my sidebar text Upon successful login, the regi ...

Using TypeScript and webpack 2 to integrate typeahead.js into your project

I am encountering an error message coming from webpack. ERROR in ./wwwroot/js/admin/infrastructure/typeaheadComponent.ts Module not found: Error: Can't resolve 'typeahead' in ... I have the following dependencies installed npm install ...

latest version of PrimeNG dropdown is 16.2

I am inquiring about how to implement virtual scrolling in a dropdown menu and connect the virtual scroll with an API backend. Specifically, I would like to know how to trigger an API call when the user reaches the end of the scroll, incrementing the page ...

Using Angular's Server-Side Rendering (SSR) alongside Breakpoint

Utilizing BreakpointObserver to adjust my client-side view based on browser size has been effective, but I've noticed some issues with server-side rendering. The layout appears strange and components that should be hidden end up being displayed during ...

What is the best way to set the screen height without needing to scroll vertically?

How can I make the orange and blue area extend to the end of the screen or have the full screen size minus the height of the navbar? When using `vh-100`, it fills the full height but creates a vertical scrollbar which is not desired. Is there a way in Boot ...

A guide on implementing getStaticProps using TypeScript in Next.js

Why am I consistently receiving undefined results when attempting to retrieve all posts from my backend? What could be causing this issue? import { AppContext } from '@/helpers/Helpers' import axios from 'axios' import { GetStaticProps} ...

Using checkboxes for selection is not compatible with bootstrap themes

When incorporating the kendo-grid with checkbox-based selection in version ^2017.2.621, everything was functioning properly until I introduced the bootstrap theme. The initialization of the grid looks like this: $(this.$refs.kendogrid).kendoGrid({ data ...

Examining React components with Enzyme for event usage in components

Struggling with testing react components that utilize event.target in events has been a challenge for me. Take for example the component code snippet below; import * as React from 'react'; import { generateGuid } from '../../../utilities/Gu ...

Learn how to retrieve data from a parent component in Angular 8 by leveraging the window.opener property in a child window

On my Angular application, I have 2 separate pages - page1 and page2. Page1 has a button that, when clicked, opens page2. Since they are different components, I need to use window.opener to access data from page1 in page2 by calling window.opener.page1Func ...

Having trouble making API calls in an Angular application

When attempting to call the api using the httpClient method, I encountered an issue where the result was returning as undefined. Below is the code from the services file. contact-service.services.ts import { Injectable } from '@angular/core'; ...

Discovering various kinds of data with a single generic type

I am looking to define a specific type like this: type RenderItems<T> = { [K in keyof T]: { label: string; options: { defaultValue: T[K]['options'][current_index_of_array]; item: (value: T[K][&apo ...

Having trouble with @HostListener on iPad or iOS devices? I'm currently using a Bluetooth keyboard to navigate and interact with an Angular app

I am currently creating a web application using Angular 6 for an iPad with a screen size of 9.7 inches. I have implemented code similar to the one found at this link. import { Component, HostListener } from '@angular/core'; export enum KEY_CODE ...

Angular 2's @ViewChild directive may sometimes yield undefined results

After consulting various related posts and documentation, I am still struggling to achieve the desired outcome with @ViewChild. My main objective is to adjust the scroll position of a div. This particular element is not a component, but a regular div in m ...