CODEWITHSUNDEEP
angular
vishnu
vishnu

Reputation: 4599

facing issues while integrating the custom pagination component using angular 2

I have created the custom pagination component using Angular2 but while try to use it in another component, getting the following error

Can't bind to 'offset' since it isn't a known property of 'app-pagination'.

app.module.ts

 import { PaginationComponent } from './components/pagination.component';
import { ComplaintModule } from './pages/complaints/complaints.module';
    import { App } from './app.component';
        @NgModule({
          bootstrap: [App],
          declarations: [
            App,
            PaginationComponent
          ],
           imports: [ // import Angular's modules
           BrowserModule,
           ComplaintModule

          ]})
        export class AppModule {
          constructor(public appState: AppState) {
          }
        }

Try to integrate in the following html file

complaints.html

<app-pagination [offset]="offset" [limit]="limit" [size]="count" (pageChange)="onPageChange($event)"></app-pagination>

pagination.component.ts

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements OnInit, OnChanges {
  @Input() offset: number = 0;
  @Input() limit: number = 1;
  @Input() size: number = 1;
  @Input() range: number = 3;

constructor() { }
}

Upvotes: 0

Views: 199

Answers (1)

Dhyey
Dhyey

Reputation: 4335

You need to create a seperate SharedModule for using PaginationComponent in multiple modules

shared.module.ts

@NgModule({
    declarations: [
        PaginationComponent
    ],
    exports: [
        PaginationComponent
    ]
})
export class SharedModule { 
}

complaint.module.ts 

@NgModule({
    imports: [
        SharedModule,
        ...
    ]
    ...
})
export class ComplaintModule {

}

some-other.module.ts

@NgModule({
    imports: [
        SharedModule,
        ...
    ]
    ...
})
export class SomeOtherModule {

}

Now you should be able to use PaginationComponent in both ComplaintModule and SomeOtherModule

Upvotes: 3

Related Questions