0

An element with the [innerHtml] directive just seems to add the declared html string inside that element, and nothing more;

through this stackblitz, i was trying to add something inside such an element, to no avail;

<div [innerHTML]="safeHtml(item.isi)"><p>new word - will not show</p></div>

Is there a way to add some more HTML inside an element with the [innerHtml] directive? In other words, how can i make the stackblitz in the example work?

vzR
  • 1,377
  • 1
  • 12
  • 16

3 Answers3

2

you can try by using ElementRef, if you want to append element not want to replace full html ,

html 

<div #Container>
    add here 
 </div>

ts file 

export class AppComponent implements AfterViewInit  {
  @ViewChild('Container') container: ElementRef ;

  content = [
   {judul: "Judul 1", isi:"<div id='title_1'>Isinya</div>"},
   {judul: "Judul 2", isi:"<div id='title_2'>pranay</div>"},
  ];

  ngAfterViewInit() { 
   this.content.forEach( (item,index) =>{
      this.container.nativeElement.insertAdjacentHTML('beforeend', `<div id="title${index}">${item.judul}</div>`);
this.container.nativeElement.insertAdjacentHTML('beforeend', `${item.isi}`);

   });
}

however elementref is not recommended way.

output of above code

enter image description here

you can see it adding content after , add here one by one

Find : Working Demo

Instead of using function in your component (its not working as your html-template trying to pass html to your typscript file) , you should create pipe as below

html.pipe.ts

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'html'
})
export class HtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

and use it like

html 

<div *ngFor="let item of content">
 <h3 [innerHTML]="item.judul | html ">add</h3>
 <div [innerHTML]="item.isi | html "><p>new word</p></div>
</div>

Find : Working Demo

Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
  • I am interested in how you get styles to be applied to html within the directive too? the css font style does not currently apply. – Danoram Jun 07 '18 at 10:32
  • @Danoram - not getting you can you provide stackbiz , because i am not using directive approach, – Pranay Rana Jun 07 '18 at 10:39
  • I meant attribute directive `[innerHTML]`. I found the answer in another stackoverflow question. dw – Danoram Jun 07 '18 at 10:52
  • @Danoram - [innerHTML]. is not directive, OP want to add html in given element dont want to replace thats why i given updated solution of Element ref ... – Pranay Rana Jun 07 '18 at 10:54
  • *Property bindings. doesn't matter I have found an answer to that plus directives etc. thanks – Danoram Jun 07 '18 at 11:10
  • @Danoram - are you OP , you have two account ? , and provide link of answer – Pranay Rana Jun 07 '18 at 11:24
  • idk what you are talking about now. [this told me what i needed to know to get styles using innerHTML binding](https://stackoverflow.com/questions/44210786/style-not-working-for-innerhtml-in-angular-2-typescript?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) I'm moving on with my life now. thanks – Danoram Jun 07 '18 at 11:39
  • @Danoram- you shoudnt do this `encapsulation: ViewEncapsulation.None,` better to use senetizer as i given in my pipe code , and I am aksing are you the person who asked above question – Pranay Rana Jun 07 '18 at 11:41
  • No i'm not. I will keep this in mind. I appreciate all your answers here. – Danoram Jun 07 '18 at 11:53
1

why are you using [innerHTML] since your item.isi is not an html element; we use innerHTML to render a html result; like if your item.isi is <p>My name</p>; if it is not a html element no use of using innerHTML, you can simply use {{item.isi}} inside your div, so you can render other html elements also

Akhil Aravind
  • 5,741
  • 16
  • 35
0

As i understand your question, using inner html replaces the inner html. Therefore the old value is replaced by the value from your object.

i understand you are following this approch as you want to display the value from the object.

So a better approach is using pipes. May be. Just check this answer. If it helps. Click here

Akshay L
  • 508
  • 2
  • 7
  • 19