Question

0

175

Views

Angular - bind InnerHTML with translate in TS file

I have a problem with binding into property to get html and translate it.
I have an innerHTML that I am trying to map to translate.

The problem is it is not translating and displaying the key as it is. P

Below is my code :-

let popupContainer = document.createElement('div');
popupContainer.innerHTML = require('html-loader!../html/myPopup.html').default;
popupContainer.addEventListener('click', clickEventHandler);
document.body.appendChild(popupContainer);

It does not translate and displays as below :- {{'fileverse-name-label' | translate}}

HTML :-

<div class="book__filters">
  <hr />
  <form class="my____form flex-row" id="filterForm">
    <div class="me-3 col-md-3 checker__filters--field">
      <label for="fileName" class="band__form--label">{{'fileverse-name-label' | translate}}</label>
      <input
        type="text"
        class="drese__form--input colrs__filters--input"
        placeholder="Search for a file verse"
        name="fileverse"
        id="fileverse"
      />
    </div>
    <div class="me-3 col-md-3 runner__filters--field">
      <label for="chapterLabel" class="chapter__form--label">{{'chapter-label' | translate}}</label>
      <select
        class="chapter__form--input geeze__filters--input"
        name="chapterLabel"
        id="chapterLabel"
      ></select>
    </div>
  </form>
  <hr />
</div>

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T10:08:18.870Z

So, adding html inside a div like you're doing will "just" add your html file into it, without any further logic.

But the pipe needs to be compiled, so you would need to do the following to make this work.

I'll just write step here, please let me know if I should provide more information

With *ngIf

Create a component out of the html you gave (module, component.ts, component.html)
Importing this component whoever you needs it.
Show/Hide it with an *ngIf.

With ViewContainerRef

Create a component out of the html you gave (module, component.ts, component.html)

// component.ts
@Component({
  selector: 'foo-bar',
  templateUrl: '../foo-bar.component.html', // File where you've added the html
})
export class fooBarComponent {
  // ...
}

// module.ts
@NgModule({
  declarations: [fooBarComponent],
  imports: [
    CommonModule,
    TranslateModule.forChild()
  ],
  exports: [fooBarComponent],
})
export class fooBarModule {}

Add id to where you need it

<ng-template #loaderContainer></ng-template>

get this element through the where-you-use-it.component.ts file.

@ViewChild('loaderContainer', { read: ViewContainerRef, static: true })
  loaderContainer: ViewContainerRef

Add the wished element to it with the ViewContainerRef createComponent() method

this.loaderContainer.createComponent(fooBarComponent)
// This will be at the same place where you initially intended to add the div

Do not forget to add the fooBarModule inside the where-you-use-it.module.ts

Additional

If you're trying to create an "orverlay"

Then I would go with the *ngIf solution and add it into your app.component.html file, just after the <router-outlet> tag

0

175