Global pipe in Angular 2

By : thombashi

Date : December 05 2020, 12:23 PM

To fix this issue You need to add the module that contains the pipe (and has it in declarations: [] and exports: []) to imports: [...] of your current module, then it's available in the current module.

code :

@NgModule({
  imports:      [ CommonModule],
  declarations: [ TranslatePipe],
  exports:      [ TranslatePipe],
})
export class TranslateModule { }

@NgModule({
  imports:      [ CommonModule, TranslateModule],
  declarations: [ NavbarMenuComponent]
})
export class NavbarModule { }

Share :

Angular 2 pipe, using observable correctly, my pipe does not return a poster path

By : Peter Martin

Date : March 29 2020, 07:55 AM

this one helps. You should use the async pipe when dealing with async operations. Remember to return a promise or an observable.

code :

@Pipe({
  name: 'poster'
})
class PosterPipe {
  apiCall;
  constructor() {
    // simulate http call
    this.apiCall = Observable.create(observer => {
      observer.next("http://lorempixel.com/400/200/sports/");
    });
  }

  transform(value: string) {
    if(value) {
      return this.apiCall.first();
    }

    return Observable.of("../../assets/img/poster.png");


  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <img src="{{MovieId | poster | async}}">
    </div>
  `,
})
export class App {
   MovieId:string;
   constructor() {
    this.MovieId = 'Exists'
   }
}

Karma test an Angular X (5) Component with a custom pipe that uses a built in pipe

By : Alex Turek

Date : March 29 2020, 07:55 AM

hope this fix your issue I restarted my complete environment and added the DecimalPipe again to my providers and now it works. I have no clue why it works now and it did not before, but it works with this configuration when I am in another module:

code :

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MaterialModule,
        BrowserAnimationsModule,
        SharedModule,
      ],
      declarations: [
        ApprovalsComponent,
      ],
      providers: [
        DataService,
        DecimalPipe,
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
      ],
    })
    .compileComponents();
  }));

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MaterialModule,
      ],
      declarations: [
        LineItemListComponent,
        CustomCurrencyPipe,
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
      ],
      providers: [
        DecimalPipe,
      ],
    })
    .compileComponents();
  }));

Angular 2 - Invalid Pipe Argument: '' for pipe 'Async Pipe'

By : gwmoves

Date : March 29 2020, 07:55 AM

wish help you to fix your issue Your *ngFor references the observable and not the data within. In your ngIf, you pipe the array correctly, but if you want to use the values from it you should declare the result as a variable, do this: optionsArr | async as options <- Note the as keyword. Then proceed to use options in the child elements as a reference to the array. So your *ngFor would become *ngFor="let option of options"

Angular Pipe - reset checkbox when other options pipe filters selected

By : NBjeren

Date : March 29 2020, 07:55 AM

I think the issue was by ths following , For the first issue you can introduce a toggle method that alternates between 'all' and 'completed'
.html

code :

<div class="field">
    <input #switchColorSuccess type="checkbox" name="switchColorSuccess" 
           class="switch is-success"
           (change)="toggle()">
    <label for="switchColorSuccess">Completed</label>
</div>

toggle() {
  if (this.switchColorSuccess.nativeElement.checked) {
    this.filterBy = "completed";
  } else {
    this.filterBy = "all";
  }
}

<!-- button -->
<button class="button is-small is-success mrmd" (click)="invokeByFilter('all')">All</button>

<!-- checkbox -->
<div class="field">
    <input #switchColorSuccess type="checkbox" name="switchColorSuccess" 
           class="switch is-success"
           (change)="toggle()">
    <label for="switchColorSuccess">Completed</label>
</div>

@ViewChild("switchColorSuccess", { static: false }) switchColorSuccess: ElementRef;

invokeByFilter(input:string) {
   this.switchColorSuccess.nativeElement.checked = false;
   this.filterBy = input;
}

Angular 2 Unit Test: Custom Pipe error The pipe could not be found

By : Edel Gerardo

Date : March 29 2020, 07:55 AM

hop of those help? I have a custom pipe called 'myPipe'. I am getting The pipe 'myPipe' could not be found error in my unit test ts. , You should be able to do this: