Ngx-translate: pipe not found in custom components


I’m using ngx-translate in a lazy-loading project and it works fine in all my @IonicPage components. I have a shared components.module.ts which I load into each @IonicPage’s module.ts and this is where I can share common components. My problem is that these common components do not have a module.ts of their own so I can’t import components.module.ts to use the ‘translate’ pipe.

My components.module.ts looks like this:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { EventRowComponent } from './event-row/event-row';
import { IonicModule } from "ionic-angular";
import { CollapsableComponent } from './collapsable/collapsable';

	declarations: [
	imports:      [ IonicModule ],
	exports:      [
       schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
export class ComponentsModule {}

Here, I share EventRowComponent but I can’t get the ‘translate’ pipe to work inside this component since it doesn’t have a module.ts. Kind of a tricky problem.

The start of my EventRowComponent looks like this:

import { Component, Input, Output, EventEmitter } from '@angular/core';

  selector: 'event-row',
  templateUrl: 'event-row.html'
export class EventRowComponent {

  @Input('event') event;
  @Input('selected') selected;
  @Output() clickHeader = new EventEmitter();

I use this component as follow in an @IonicPage:

<div *ngFor="let event of eventList">
        <event-row [event]="event" [selected]="event === selectedEvent" (clickHeader)="onClickEventHeader(event)"></event-row>

Anyone know how I can get the ‘translate’ pipe working inside a custom component like this?


I’ve come across this problem and I have a temporary fix for this:

On your custom_component.html
{{ title }}

On your custom_component.ts
@Input(‘title’) textTitle;

this.title = this.textTitle;

Then finally, on your page invoke this way:

<custom_component title="{{title | translate}}"></custom_component>

this.title: String = ‘YOURi18TEXT’;

On page load it will have the translated value.

Changing language directly on the page will not change the value… So if you can find a fix for importing a component inside a component please let me know.

If you’re trying to change the language through your custom_component you can reset the value everytime this function is called:

changeLanguage() {
if (this.translate.currentLang == ‘pt-PT’)
this.title = this.textTitle;

Still just a fix but solves the problem I mentioned before