Ngx-translate: pipe not found in custom components


#1

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';

@NgModule({
	declarations: [
	  EventRowComponent,
          CollapsableComponent
        ],
	imports:      [ IonicModule ],
	exports:      [
	  TranslateModule,
          EventRowComponent,
          CollapsableComponent
       ],
       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';

@Component({
  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>
</div>

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


#2

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;

ngAfterViewInit(){
this.title = this.textTitle;
}

Then finally, on your page invoke this way:

your_page.html
<custom_component title="{{title | translate}}"></custom_component>

your_page.ts
this.title: String = ‘YOURi18TEXT’;

Pros:
On page load it will have the translated value.

Cons:
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.

Update:
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.translate.use(‘en’);
else
this.translate.use(‘pt-PT’);
this.title = this.textTitle;
}

Still just a fix but solves the problem I mentioned before