如何删除DOM元素或将其从组件中清空

Question

I have a dom element, generated automatically by an external component.

<div id="abc">test data</div>

I would like to remove, hide or empty the content, whichever is easier.

Answer 1

Your request is quite odd, because before ngOnInit() nothing is rendered yet. So I guess you want it to be hidden on loading of the component? You can use *ngIf :

<div *ngIf="showTestData" id="abc">test data</div>

@Component({})
export class TestComponent {
  showTestData: boolean = false;

  ngOnInit(): void {
    // nothing necessary here
  }
}

Answer 2

<div id="abc"><span *ngIf="show_it">test data</span></div> And you declare show_it as a member variable of the component class, and set it to false in ngOnInit.

Of course, you can put the ngIf on the div directly.

Edit after your comments If you know the id for sure and it comes from outside, you can use @ViewChild to select the element and hide it once you get a hold of it.