TypeScript - Append HTML to container element in Angular 2

Question

What I want to do  is simply append some html on an element  I checked some links  and i find different confusing non-working non-recomended etc solutions   Using javascript I ll do something like this  var d1   document getElementsByClassName  one    d1 insertAdjacentHTML  beforeend     lt div class  two  gt two lt  div gt       How do I achieve the same result using typescript angular2  RC5    EDIT  The element with class  one is generated by an external js  and I can t modify it

User · Answer

When working with Angular the recent update to Angular 8 introduced that a static property inside @ViewChild() is required as stated here and here. Then your code would require this small change:

@ViewChild('one') d1:ElementRef;

into

// query results available in ngOnInit
@ViewChild('one', {static: true}) foo: ElementRef;

OR

// query results available in ngAfterViewInit
@ViewChild('one', {static: false}) foo: ElementRef;

User · Answer

You could do something like this   htmlComponent ts  htmlVariable  string     lt b gt Some html  lt  b gt      this is html in TypeScript code that you need to display  htmlComponent html   lt div  innerHtml   htmlVariable  gt  lt  div gt    this is how you display html code from TypeScript in your html

User · Answer

With the new angular class Renderer2   constructor private renderer Renderer2         ViewChild  one     static  false    d1  ElementRef     ngAfterViewInit         const d2   this renderer createElement  div        const text   this renderer createText  two        this renderer appendChild d2  text       this renderer appendChild this d1 nativeElement  d2

User · Answer

There is a better solution to this answer that is more Angular based     Save your string in a variable in the  ts file  MyStrings     one   two   three   In the html file use  ngFor    lt div class  one   ngFor  let string of MyStrings  let i   index  gt        lt div class  two  gt   string   lt  div gt    lt  div gt  if you want to dynamically insert the div element  just push more strings into the MyStrings array  myFunction nextString       this MyString push nextString       this way every time you click the button containing the myFunction nextString  you effectively add another class  two  div which acts the same way as inserting it into the DOM with pure javascript

User · Answer

1      lt div class  one   innerHtml   htmlToAdd  gt  lt  div gt      this htmlToAdd     lt div class  two  gt two lt  div gt      See also In RC 1 some styles can  39 t be added using binding syntax   Alternatively      lt div class  one   one gt  lt  div gt       ViewChild  one   d1 ElementRef   ngAfterViewInit       d1 nativeElement insertAdjacentHTML  beforeend     lt div class  two  gt two lt  div gt         or to prevent direct DOM access   constructor private renderer Renderer       ViewChild  one   d1 ElementRef   ngAfterViewInit       this renderer invokeElementMethod this d1 nativeElement    insertAdjacentHTML    beforeend     lt div class  two  gt two lt  div gt           3       constructor private elementRef ElementRef      ngAfterViewInit       var d1   this elementRef nativeElement querySelector   one      d1 insertAdjacentHTML  beforeend     lt div class  two  gt two lt  div gt

[javascript] TypeScript - Append HTML to container element in Angular 2

Examples related to javascript

Examples related to angular

Examples related to typescript