Angular - bind InnerHTML with translate in TS file

Question

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>

I gave you an answer, still you could provide more information about your .component.ts & .component.html file if this answer isn't answering your question, I'll then update it ;) — Raphaël Balet
– Raphaël Balet, Commented Apr 30, 2022 at 9:16
@RaphaëlBalet I have added my HTML.. This specific HTML does not have any component. It is an independent html file. By the way translate works properly in other sections of my application. It is only the unique case i am finding the problem. This html has the popup code which i am calling using innterHTML — sTg
– sTg, Commented Apr 30, 2022 at 9:22
Just to say, but what you're trying to achieve here, isn't really the Angular way of doing it. Is it working elsewhere where you're adding the component like this ? Because adding it through javscript like that, will break the ways pipes are working. (But I'm not 100% sure about that) The only way I could see this working is by working with ViewContainerRef. I'll update my answer after knowing if this is really what you want :) — Raphaël Balet
– Raphaël Balet, Commented Apr 30, 2022 at 9:30
@RaphaëlBalet Yep rite this is what i am looking for... Trying to attach a view(html) to a container. — sTg
– sTg, Commented Apr 30, 2022 at 9:34

Raphaël Balet · Accepted Answer · 2022-04-30 09:44:40Z

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

Collectives™ on Stack Overflow

Angular - bind InnerHTML with translate in TS file

1 Answer 1

With *ngIf

With ViewContainerRef

Additional

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

With *ngIf

With ViewContainerRef

Additional

Comments

Your Answer

Sign up or log in

Post as a guest

Related