this.mdbPagination is undefined

Topic: this.mdbPagination is undefined

Héctor Manuel Mendoza García pro asked 5 years ago

Hi!

I am trying to implement datatables in my project, I copied Datatables with data from remote API example and when I run the project I get the following error... "this.mdbPagination is undefined can't access the setMaxVisibleItemsNumberTo property".

And all about mdbPagination throw the same error. I just copied your code.

Thank you.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

We will add buttons for navigation to first/last page in next version of MDB Angular.

Add comment

Alejandro Fernández free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello,

I'm having the same issue that Hector mentioned. I'm using MDB Free on Angular and I have the following:

My app.module.ts

import { MDBBootstrapModule, WavesModule, IconsModule, TableModule } from 'angular-bootstrap-md';

My component:

@ViewChild(MdbTablePaginationComponent) mdbTablePagination: MdbTablePaginationComponent; @ViewChild(MdbTableDirective) mdbTable: MdbTableDirective

When I try to trigger the pagination on the "AfterViewInit", I get the error in the title of this thread.

Thank you,

Alejandro.

Arkadiusz Idzikowski staff commented 5 years ago

Which version of MDB Angular do you use? From where do you import MdbTablePaginationComponent and MdbTableDirective (in component typescript file)?

Alejandro Fernández free commented 5 years ago

@Arkadiusz Idzikowski I use "angular-bootstrap-md": "^7.5.4".

I import MdbTablePaginationComponent and MdbTableDirective in the component that I want to use it (the typescript file)

Arkadiusz Idzikowski staff commented 5 years ago

Does your import path look like this?

import { MdbTablePaginationComponent, MdbTableDirective } from 'angular-bootstrap-md';

Please try to add template variable to the mdb-table-pagination component and use it in ViewChild decorator instead of component name.

<mdb-table-pagination #tablePagination></mdb-table-pagination> @ViewChild('tablePagination') mdbTablePagination: MdbTablePaginationComponent;

If that won't help please send a simple demo on which I will be able to reproduce your problem to a.idzikowski@mdbootstrap.com. We need to check the table code and project configuration.

Please insert min. 15 characters.

Alejandro Fernández free commented 5 years ago

Hi @Arkadiusz Idzikowski

I managed to "solve" the issue by doing it via in the html file and putting the viewchild element id in the component.

What I don't like about this method is that I haven't been able to find a way to redesign the element with css and make it appear like the documentation shows it.

Thank you!

Arkadiusz Idzikowski staff commented 5 years ago

Glad it works. Could you provide more details about the problem with css?

Alejandro Fernández free commented 5 years ago

Well, I implemented it and the default configuration does not have a "First" and "Last" page navigation. It also doesn't have the possibility of selecting the page you're on. Is this possible to do? I haven't been able to find anything in the documentation about it.

Arkadiusz Idzikowski staff commented 5 years ago

We will update the component code and documentation and let you know when it will be available.

Alejandro Fernández free commented 5 years ago

Hi @Arkadiusz Idzikowski
Thanks for that. But is this even a possibility? To add numbers to the pagination?

Regards,

Alejandro.

Arkadiusz Idzikowski staff commented 5 years ago

We plan to add possibility to navigate to first/last page. Selecting specific page won't be possible.

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear <a href="/profile/?id=49543" rel="nofollow">@Héctor Manuel Mendoza García</a> Please check, if in your app.module.ts you're importing ng-uikit-pro-standard from ng-uikit-pro-standard, and not from some other location.Your app.module.ts should have import like this:<pre style="background-color: #212121; color: #eeffff; font-family: 'Fira Code'; font-size: 9.0pt;">import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';</pre>And app.component.ts should have import like this:<pre style="background-color: #212121; color: #eeffff; font-family: 'Fira Code'; font-size: 9.0pt;">import { MdbTableDirective, MdbTablePaginationComponent, MdbTableService } from 'ng-uikit-pro-standard';</pre>I've checked this, and if you'll import MdbTablePaginationComponent from other location than ng-uikit-pro-standard, you'll get the error from ticket title.Best Regards,Damian

Please insert min. 20 characters.

Dear @Héctor Manuel Mendoza García

Please check, if in your app.module.ts you're importing ng-uikit-pro-standard from ng-uikit-pro-standard, and not from some other location.

Your app.module.ts should have import like this:

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

And app.component.ts should have import like this:

import { MdbTableDirective, MdbTablePaginationComponent, MdbTableService } from 'ng-uikit-pro-standard';

I've checked this, and if you'll import MdbTablePaginationComponent from other location than ng-uikit-pro-standard, you'll get the error from ticket title.

Best Regards,

Damian

Add comment

Write

Create snippet

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: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 6.3.0
Device: Laptop
Browser: Mozilla
OS: Windows
Provided sample code: No
Provided link: No

Héctor Manuel Mendoza García

Pro User 5Support score
1Questions 0Answers 0Snippets