将div动态添加到容器angular 6

<div id="container"></div>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('container', { static: true }) container: ElementRef;
}

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('container', { static: true }) container: ElementRef;

  constructor(private renderer: Renderer2) {}

  addDynamicDiv() {
    const newDiv = this.renderer.createElement('div');
    this.renderer.setAttribute(newDiv, 'class', 'dynamic-div');
    this.renderer.appendChild(newDiv, this.renderer.createText('Dynamic Div Content'));
    this.renderer.appendChild(this.container.nativeElement, newDiv);
  }
}

<button (click)="addDynamicDiv()">Add Dynamic Div</button>