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 jav

Answer 1

1.

this.htmlToAdd = '
two
';

See also In RC.1 some styles can't be added using binding syntax

2. Alternatively

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  d1.nativeElement.insertAdjacentHTML('beforeend', '
two
');
}

or to prevent direct DOM access:

constructor(private renderer:Renderer) {}

@ViewChild('one') d1:ElementRef;

ngAfterViewInit() {
  this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '
two
']);
}

3.

constructor(private elementRef:ElementRef) {}

ngAfterViewInit() {
  var d1 = this.elementRef.nativeElement.querySelector('.one');
  d1.insertAdjacentHTML('beforeend', '
two
');
}