CODEWITHSUNDEEP
arraysangularloopspipe
Pkale
Pkale

Reputation: 23

Unexpected pipe imported by the module 'AppModule'. Please add a @NgModule annotation

I have created Unique pipe for removing duplicate items from array and i have imported it into app.module.ts

Here is my code.

app.module.ts

import { UniquePipe } from './_pipe/uniquePipe';

@NgModule({
  imports: [BrowserModule, CommonModule, FormsModule, ReactiveFormsModule, HttpClientModule, UniquePipe],
  // tslint:disable-next-line:max-line-length
  declarations: [ AppComponent, UniquePipe],
  exports: [UniquePipe ],
  bootstrap:    [ AppComponent ],
})

uniquePipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash';


@Pipe({
  name: 'unique',
  pure: false
})
export class UniquePipe implements PipeTransform {
  transform(value: any): any {
    if (value !== undefined && value !== null) {
      return _.uniqBy(value, 'type');
    }
    return value;
  }
}

app.component.html

 <li class="nav-item" *ngFor="let items of list | unique">
      <a class="nav-link" data-toggle="tab" href="#list"> {{items.type}}</a>
    </li>

How can i resolve this issue

Upvotes: 2

Views: 4058

Answers (1)

msdosx86
msdosx86

Reputation: 946

Pipes should be added only in declarations, so just remove your pipe from imports.

Upvotes: 5

Related Questions