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 >
  <hr />
  <form  id="filterForm">
    <div >
      <label for="fileName" >{{'fileverse-name-label' | translate}}</label>
      <input
        type="text"
        
        placeholder="Search for a file verse"
        name="fileverse"
        id="fileverse"
      />
    </div>
    <div >
      <label for="chapterLabel" >{{'chapter-label' | translate}}</label>
      <select
        
        name="chapterLabel"
        id="chapterLabel"
      ></select>
    </div>
  </form>
  <hr />
</div>

CodePudding user response：

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

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

With ViewContainerRef

1. 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 {}

2. Add id to where you need it

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

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

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

4. 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

5. 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