'mdb-select' is not a known element:

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

fodxp 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.

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

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

Add comment

fodxp answered 6 years ago

0 0 Best answer

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