So here's the issue... I've integrated an Angular 4 template into my application which includes a functioning translate service. The only problem is, I'm unsure of how to utilize that pipe in my code.
In HTML, it's as simple as adding
<span>{{ this.variable | traslate }}</span>Below is the snippet of code from my component.ts file:
const SMALL_WIDTH_BREAKPOINT = 960;
@Component({
selector: 'app-mycomponent',
templateUrl: './mycomponent.component.html',
styleUrls: ['./mycomponent.component.scss']
})
export class TrackingComponent implements OnInit {
currentLang = 'es';
private mediaMatcher: MediaQueryList = matchMedia(`(max-width:
${SMALL_WIDTH_BREAKPOINT}px)`);
constructor(
public translate: TranslateService,
zone: NgZone,
private router: Router,
) {
const browserLang: string = translate.getBrowserLang();
translate.use(browserLang.match(/en|es/) ? browserLang : 'es');
this.mediaMatcher.addListener(mql => zone.run(() => {
this.mediaMatcher = mql;
}));
translate.use(this.currentLang);
}
ngOnInit() { }
myFunction(msg: string) : {
const translatedText = msg; // THIS IS WHERE I'M STRUGGLING TO INCORPORATE THE TRANSLATE SERVICE EFFECTIVELY
alert(translatedText );
}
}
I ensured all necessary components are included in the module since it functions properly in HTML, but implementing it within the code remains a challenge.
In my quest for a solution, I came across the following approach:
let translatedText = new TranslatePipe().transform(msg);
however, the `TranslatePipe` seems to be ineffective.
Can anyone offer guidance on how to successfully call the translation service?