Ngx-bootstrap: Pagination component: Can't bind to 'ngModel' since it isn't a known property of 'pagination'.

[mounthorse-slns]

When trying to bind my _page_ property through _ngModel_ (as shown in the example) I got the following exception:

Can't bind to 'ngModel' since it isn't a known property of 'pagination'. ("
<pagination *ngIf="config.paging"
        class="pagination-sm"
        [ERROR ->][(ngModel)]="page"
        [totalItems]="length"
        [itemsPerPage]="itemsPerPage"
"): ManageHomeComponent@18:12

I'm using this component inside a sub-module of my application:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

import { AdminComponent } from "./components/admin/admin.component";
import { AdminRoutingModule } from "./admin-routing.module";

import { TabComponent, TabsComponent } from "../ui/navigation";

import { AdminDashboardComponent } from "./components/admin-dashboard/admin-dashboard.component";
import { ManageHomeComponent } from "./components/manage-home/manage-home.component";
import { ManageAboutComponent } from "./components/manage-about/manage-about.component";
import { ManageProjectsComponent } from "./components/manage-projects/manage-projects.component";

import { PaginationModule } from "ng2-bootstrap/pagination";
import { Ng2TableModule } from "ng2-table/ng2-table";

// https://angular.io/docs/ts/latest/guide/router.html#!#guards
@NgModule({
    imports: [
        CommonModule,
        AdminRoutingModule,
        PaginationModule.forRoot(),
        Ng2TableModule
    ],
    declarations: [
        TabComponent,
        TabsComponent,
        AdminComponent,
        AdminDashboardComponent,
        ManageHomeComponent,
        ManageAboutComponent,
        ManageProjectsComponent
    ]
})
export class AdminModule { }

The main app module is:

import { NgModule } from "@angular/core";
import { Router } from "@angular/router";
import { UniversalModule } from "angular2-universal";
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from "./components/app/app.component";
import { AppRoutingModule } from "./app-routing.module";

...

import { ModalModule } from "angular2-modal";
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';

@NgModule({
    bootstrap: [ AppComponent ],
    declarations: [
        NavMenuComponent,
        AppComponent,
        ...
    ],
    imports: [
        UniversalModule, // must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FlexLayoutModule,
        AuthModule,
        AppRoutingModule,
        ModalModule.forRoot(),
        BootstrapModalModule
    ],
    providers: [
        AppService,
        DialogService,
        ProjectsService,
        GalleryService
    ]
})
export class AppModule {
    // diagnostic only: inspect router configuration
    constructor(router: Router) {
        // console.log("Routes: ", JSON.stringify(router.config, undefined, 2));
    }
}

I'm using the last ng2-bootstrap version and angular 2.4.7 with universal.

How could I resolve the problem?

[nchizhov]

Add to imports FormsModule

[mounthorse-slns]

@nchizhov Thank you, I forgot the FormsModule. Adding it to imports resolves the problem

[bmannava-invn]

import {Ng2TableModule} from 'ng2-table/ng2-table';
import { PaginationModule } from "ng2-bootstrap/pagination"; // from ng2-bootstrap
@NgModule({
imports: [

Ng2TableModule,
PaginationModule.forRoot(),

],