Question about Modifying Content with Angular2:
I am currently working on implementing a translation functionality for my project. My goal is to pull data from a database, load it into a local object, and update all translated object values dynamically. Initially, I tried using a pipe for this task, but encountered issues with updating the value when new translations are added without compromising performance. This led me to explore using a custom directive as an alternative solution, despite its more extensive code footprint.
Approach Tried:
The directive I have created looks like this:
@Directive({
selector: '[i18n]'
})
export class I18nDirective
{
@Input() set i18n(key: string) {
// Code snippet for updating innerHTML content with translations
}
public constructor(
private el: ElementRef,
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef,
private renderer: Renderer,
) { }
}
Despite trying various combinations of updating the tag's content within the directive, I have not been successful in achieving the desired outcome.
An example usage of the tag with the directive looks like this:
<span class="..." *i18n="'translation-page-title'"></span>
I am seeking advice on how to dynamically change the innerHTML of a tag containing the directive, especially with regards to changing it based on language preferences.
Thank you for your assistance!