Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: 'mdb-select' is not a known element:

fodxp free asked 6 years ago


Hello MDB Support, 

I am using ng-uikit-pro-standard-7.0.0 and following the angular multiselect documentation here

https://mdbootstrap.com/docs/angular/forms/multiselect/

The vscode editor has a compile error - 'mdb-select' is not a known element:

And when I try ng serve, I get the following compilation errors

ERROR in node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/autocomplete/services/data-factory.service.d.ts(1,22): error TS2307: Cannot find module '@angular/http'.

node_modules/ng-uikit-pro-standard/ng-uikit-pro-standard/pro/autocomplete/services/remote-data.service.d.ts(1,47): error TS2307: Cannot find module '@angular/http'.

Here's the code

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// MDB

import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';

import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { HttpClientModule } from '@angular/common/http';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

HttpClientModule,

MDBBootstrapModulesPro.forRoot(), BrowserAnimationsModule// mdb

,ReactiveFormsModule,FormsModule

],

providers: [MDBSpinningPreloader],

bootstrap: [AppComponent]

})

export class AppModule { }
 
app.component.ts
 
import { Component, OnInit } from '@angular/core';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

title='multiselect';

optionsSelect:Array<any>;

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1' },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

];

}

}
 
app.component.html
<div style="text-align:center">

<h1>

Welcome to {{ title }}!

</h1>

<divclass="row">

<divclass="col-md-6">

<mdb-select[options]="optionsSelect"[multiple]="true"placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</div>

</div>

Appreciate your help.
Thanks.

fodxp free answered 6 years ago


Thanks Damian, this is resolved.


Damian Gemza staff answered 6 years ago


Dear @fodxp 

Please add @angular/http package to your package.json file, and execute npm install one more time.

After this, everything should be okay.

Best Regards,

3Damian


fodxp free answered 6 years ago


Hello Damian,

I am using Angular 7. I have emailed the application.zip to you.

Thanks,

 

ng v

Angular CLI: 7.1.1

Node: 8.11.3

OS: darwin x64

Angular: 7.1.1

... animations, cli, common, compiler, compiler-cli, core, forms

... language-service, platform-browser, platform-browser-dynamic

... router




Package                           Version

-----------------------------------------------------------

@angular-devkit/architect         0.11.1

@angular-devkit/build-angular     0.11.1

@angular-devkit/build-optimizer   0.11.1

@angular-devkit/build-webpack     0.11.1

@angular-devkit/core              7.1.1

@angular-devkit/schematics        7.1.1

@ngtools/webpack                  7.1.1

@schematics/angular               7.1.1

@schematics/update                0.11.1

rxjs                              6.3.3

typescript                        3.1.6

webpack                           4.23.1

 


Damian Gemza staff answered 6 years ago


Dear @fodxp 

Could you please confirm, if you're using Angular 7 or Angular 6?

Tried to reproduce your problem on application with Angular 7, but without success. Multi select is working fine for me, both ng serve and ng serve --prod.

Could you please also provide me the reproduction repository? You can send it to me here: d.gemza@mdbootstrap.com

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: desktop
  • Browser: chrome
  • OS: OSX
  • Provided sample code: Yes
  • Provided link: Yes