CODEWITHSUNDEEP
angulartypescript
user4912958
user4912958

Reputation:

Share the same component

I need use the JwPaginationComponent in my auction.component and in my auctiongroup.component.

So i created the shared.module.ts:

import { NgModule } from '@angular/core';

import { JwPaginationComponent } from 'jw-angular-pagination';

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

And in my auction.module.ts and auctiongroup.module I imported the sharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuctionComponent } from './auction/auction.component';
import { AuctionListComponent } from './auction-list/auction-list.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { Auction_Routes } from './auction.routes';
import { FormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule.forChild(Auction_Routes),
    FormsModule,
    SharedModule
  ],
  declarations: [
    AuctionComponent,
    AuctionListComponent
  ]
})
export class AuctionModule { }

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuctionGroupComponent } from './auctiongroup/auctiongroup.component';
import { AuctionGroupListComponent } from './auction.group-list/auctiongroup-list.component';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AuctionGroup_Routes } from './auctiongroup.routes';
import { FormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    RouterModule.forChild(AuctionGroup_Routes),
    FormsModule,
    SharedModule
  ],
  providers: [SharedModule],
  declarations: [
    AuctionGroupComponent,
    AuctionGroupListComponent
  ]
})
export class AuctionGroupsModule { }

But it's not working, i'm getting the error below:

compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'ngClass' since it isn't a known property of 'li'. ("<ul *ngIf="pager.pages && pager.pages.length" class="pagination">
  <li [ERROR ->][ngClass]="{disabled:pager.currentPage === 1}" class="page-item first-item">
      <a (click)="setPag"): ng:///SharedModule/JwPaginationComponent.html@1:6
Can't bind to 'ngClass' since it isn't a known property of 'li'. ("
      <a (click)="setPage(1)" class="page-link">First</a>
  </li>
  <li [ERROR ->][ngClass]="{disabled:pager.currentPage === 1}" class="page-item previous-item">
      <a (click)="set"): ng:///SharedModule/JwPaginationComponent.html@4:6
Can't bind to 'ngClass' since it isn't a known property of 'li'. ("ger.currentPage - 1)" class="page-link">Previous</a>
  </li>
  <li *ngFor="let page of pager.pages" [ERROR ->][ngClass]="{active:pager.currentPage === page}" class="page-item number-item">

I don't know the right way to solve this problem.

Upvotes: 1

Views: 71

Answers (1)

Pavel B.
Pavel B.

Reputation: 875

You have to import CommonModule to SharedModule. It's basicly telling you that in the SharedModule isn't any ngClass directive. I thing;

@NgModule({
  declarations: [
     JwPaginationComponent
  ],
  exports: [JwPaginationComponent],
  imports: [CommonModule]
})

You have to keep in mind that the module can only use its own imports and can't use parents imports.

Upvotes: 1

Related Questions