mdb autocompleter issue

Topic: mdb autocompleter issue

akademe pro asked 5 years ago

Hi, I'm unable to get the JSON values in autocomplete search results. After importing the CompleterServices and CompleterData there is staticInjector error or Can't resolve all parameters for AddCourseComponent: ([object Object], [object Object], ?). I would like to know how to get the json value or which is the correct path to completerService and data file. https://mdbootstrap.com/angular/forms/autocomplete/#APIref following instructions as shown in the doc.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Did you try to use just 'ng-uikit-pro-standard'? It should work this way. If you want to use specific path there should be node_modules/ng-uikit-pro-standard at some point.

akademe pro commented 5 years ago

Yes i did import it from node modules import { CompleterData, CompleterService } from '../../../../../../node_modules/ng-uikit-pro-standard'; Error: StaticInjectorError(AppModule) This error appears still.

Arkadiusz Idzikowski staff commented 5 years ago

Please send a demo app to a.idzikowski@mdbootstrap.com, so I can debug this problem. I tried to recreate it in my own but with no success.

akademe pro commented 5 years ago

Is this the correct mail id ??, a.idzikowski@mdbootstrap.com. I am getting unable to deliver the error message from the mail server.

Arkadiusz Idzikowski staff commented 5 years ago

Yes, the email address is correct. I received email (I think it was from you), but it only contained a test message. Please try to send the app again.

Add comment

akademe pro answered 5 years ago

0 0 Best answer

<div>
<div>in html template:</div>
<div></div>
<div><mdb-autocomplete [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0"></div>
<div></mdb-autocomplete></div>
</div>
<div></div>
<div>in ts file:</div>
<div></div>
<div>
<div>
<div>import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';</div>
<div>import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';</div>
</div>
</div>
<div>
<div>
<div>import { CompleterData } from '../../../../../../ng-uikit-pro-standard/ng-uikit-pro-standard';</div>
<div>import { CompleterService } from '../../../../../../ng-uikit-pro-standard/ng-uikit-pro-standard';</div>
<div>
<div>
<div>@Component({</div>
<div>selector:'app-add-team',</div>
<div>templateUrl:'./add-team.component.html',</div>
<div>styleUrls: ['./add-team.component.scss'],</div>
<div>changeDetection:ChangeDetectionStrategy.OnPush,</div>
<div>})</div>
<div>export class AddTeamComponent implements OnInit {</div>
</div>
</div>
</div>
</div>
<div></div>
<div>
<div>
<div>protected searchStr: string;</div>
<div>protecteddataService:CompleterData;</div>
<div>protectedsearchData= [</div>
<div>{ color: 'red' },</div>
<div>{ color: 'green' },</div>
<div>{ color: 'blue' },</div>
<div>{ color: 'cyan' },</div>
<div>{ color: 'magenta' },</div>
<div>{ color: 'yellow' },</div>
<div>{ color: 'black' },</div>
<div>];</div>
<div></div>
</div>
<div>
<div>
<div>constructor(private formBuilder: FormBuilder, private completerService: CompleterService) {</div>
<div>this.dataService=completerService.local(this.searchData, 'color', 'color');</div>
<div>}</div>
<div></div>
</div>
</div>
</div>
<div>}</div>
<div></div>
<div></div>
<div>Error message: Can't resolve '../../../../../../ng-uikit-pro-standard/ng-uikit-pro-standard'</div>
<div>and</div>
<div>we tried to import it from the npm modules like this</div>
<div></div>
<div>
<div>
<div>import { MDBBootstrapModulesPro, MDBSpinningPreloader, CompleterService} from './../lib/ng-uikit-pro-standard';</div>
<div></div>
</div>
</div>
<div>and getting this error</div>
<div></div>
<div>Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AddTeamComponent -> CompleterService]:
StaticInjectorError(Platform: core)[AddTeamComponent -> CompleterService]:
NullInjectorError: No provider for CompleterService!</div>
<div></div>
<div>The path is correct but still, I'm getting this error.</div>
<div></div>
<div>Thank you</div>

Please insert min. 20 characters.

in html template:

<mdb-autocomplete [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">

</mdb-autocomplete>

in ts file:

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

import { CompleterData } from '../../../../../../ng-uikit-pro-standard/ng-uikit-pro-standard';

import { CompleterService } from '../../../../../../ng-uikit-pro-standard/ng-uikit-pro-standard';

@Component({

selector:'app-add-team',

templateUrl:'./add-team.component.html',

styleUrls: ['./add-team.component.scss'],

changeDetection:ChangeDetectionStrategy.OnPush,

})

export class AddTeamComponent implements OnInit {

protected searchStr: string;

protecteddataService:CompleterData;

protectedsearchData= [

{ color: 'red' },

{ color: 'green' },

{ color: 'blue' },

{ color: 'cyan' },

{ color: 'magenta' },

{ color: 'yellow' },

{ color: 'black' },

];

constructor(private formBuilder: FormBuilder, private completerService: CompleterService) {

this.dataService=completerService.local(this.searchData, 'color', 'color');

}

Error message: Can't resolve '../../../../../../ng-uikit-pro-standard/ng-uikit-pro-standard'

and

we tried to import it from the npm modules like this

import { MDBBootstrapModulesPro, MDBSpinningPreloader, CompleterService} from './../lib/ng-uikit-pro-standard';

and getting this error

Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[AddTeamComponent -> CompleterService]: StaticInjectorError(Platform: core)[AddTeamComponent -> CompleterService]: NullInjectorError: No provider for CompleterService!

The path is correct but still, I'm getting this error.

Thank you

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Dear akademe, Could you provide an example html and ts code so I can debug this problem in my app? Regards, Arek

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.2.1
Device: Desktop
Browser: chrome
OS: Mac OS
Provided sample code: No
Provided link: No

akademe

Pro User 35Support score
8Questions 1Answers 0Snippets