Dynamicly add html elements through ngFor in AngularJS - html

Question

I am new comer in Angular 5. I would like to get the html elements from .ts file and dynamically add them in html file through ngFor. I tried to do it using [innerHtml] but it is not working and return me [object HTMLSelectElement]. How can I solve this problem?
transferDataSuccess(event) {
var dropHere = document.getElementById('dropHere')
var dropInSettings = document.getElementById('dropInSettings')
for (var key in this.transferData) {
if (this.transferData[key].name == event.dragData.name) {
this.receivedData.push({
elem:this.transferData[key].element});
}
}
}
<div class="panel-heading" id="dropHere" *ngFor="let x of receivedData" [innerHTML] = "x.elem">

Answer 1

A better way to do this can be as below:
let's say your options are coming dynamically from the service and you want to create <option> element dynamically.
A sample snippet to describe the functionality :
<select>
<ng-container *ngFor="let option of options;">
<option [value]="option['value']">{{option['label']}}</option>
</ng-container>
</select>
If you already have the element in the component, you can access it using the ElementRef as below:
import { Component, ElementRef, AfterViewInit } from '#angular/core';
#Component({
selector: 'app-my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss']
})
export class MyComponent implements AfterViewInit {
constructor(private el: ElementRef) {
this.el = el;
}
ngAfterViewInit() {
console.log('element', this.el.nativeElement);
this.el.nativeElement.getElementById('dropHere');
}
}
If it not good practice to manipulate DOM from the component class.
I hope this help.