Topic: MDB Angular PRO Standard Issues

id90travel pro asked 6 years ago


We are currently using Angular 5 and just tried to upgrade to MDB Angular PRO Standard and are having an issue with Autocomplete. Everything else seems to work (haven't tested everything) but we're getting this error:

 

TypeError: Object(...) is not a function

 

This happens the second you type a character into the autocomplete component.


Damian Gemza staff commented 6 years ago

Dear id90travel, Could you provide me reproduction steps to reproduce your case? Please provide me the code which you're using. Does this problem exist with code copied from our docs, or it came after your changes to component? I've tried to reproduce your problem with Basic Example of Autocomplete, and for me, everything is working fine. Please provide me as much information about reproduction your case as you can. Best Regards, Damian

id90travel pro commented 6 years ago

Sorry this whole support interface is terrible, I had to post an "answer" to get my code in here and not a comment...

id90travel pro commented 6 years ago

See my "answer" below, but I did seem to pinpoint where this is occuring. It seems that "timer" isn't defined in the "clear" method of MdbListDirective. Not sure how/why this is happening, but that is where it blows up.   <pre>MdbListDirective.prototype.clear = function () { var _this = this; if (this.searchTimer) { this.searchTimer.unsubscribe(); } this.clearTimer = timer(CLEAR_TIMEOUT).subscribe(function () { _this._clear(); }); };</pre>

Damian Gemza staff commented 6 years ago

Dear id90travel, This problem is caused by this, that Angular 6 and ng-uikit-pro-standard uses rxjs6. You're using Angular 5 and rxjs5 in your project, but ng-uikit-pro-standard is compatible with NG6 and RX6. So you have two ways to fix this problem: 1st: Update your project to Angular 6 and RxJS6, 2nd: Use our old ng-mdb-pro repository in version 6.0.2 - It's compatible with Angular 5 and RxJS 5. Here's the link to ng-mdb-pro repository: https://git.mdbootstrap.com/mdb/angular/ng-pro I can do nothing more for you. Best Regards, Damian

id90travel pro answered 6 years ago


Did you try it with Angular 5? Still getting the same error. We are not doing anything extremely fancy, we have a component that will generate the autocomplete:

import { Component, Input, OnInit } from "@angular/core";
import { ItemsService } from "@services/items/items.service";
import { CompleterService, CompleterData } from 'ng2-completer'

@Component({
  selector: 'items-autocomplete-component',
  templateUrl: './items.autocomplete.html'
})

export class ItemsAutocompleteComponent implements OnInit {

  dataService: CompleterData;
  searchStr: string;
  allItems;
  items;

  constructor(
    private itemsService: ItemsService,
    private completerService: CompleterService
  ) { }

  ngOnInit() {
    this.itemsService.getItems().subscribe(items => {
      this.dataService = this.completerService.local(items, 'display_name', 'display_name');
    });
  }
}

 

and in the template:

 

<mdb-completer
  [label]="'items.headers.name' | translate"
  [(ngModel)]="searchStr"
  [datasource]="dataService"
  [minSearchLength]="2"
  mdbInputValidate>
</mdb-completer>


Please insert min. 20 characters.

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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags