Add Custom html elements to Angular Datatable DOM using JQuery

I am trying to add few buttons to Datatable DOM following legacy way.

Here is my Datatable Options

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: "full_numbers",
      pageLength: 10,
      processing: true,
      dom:"<'row'<'col-sm-6 col-md-3'l><'col-md-3 col-sm-6 toolbar'><'col-sm-12 col-md-6'f>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
    };  
    ///load data code into datatable
    rerender();

  
  }

  ngAfterViewInit(): void {
    this.dtTrigger.next();

  }

  ngOnDestroy(): void {
    this.dtTrigger.unsubscribe();
  }



  rerender(): void {
    this.dtElement.dtInstance.then(element=>{
      $('div.toolbar').html("<button class='btn btn-primary'>My Button</button>");
    });
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();    
      this.dtTrigger.next();
      
    });    

  }

But data loads without any issue. but my button not getting added into the div inside the datatable DOM. I was expecting the button to be there inside the class toolbar.

That was I did it many times in JQuery projects. Not in angular.

But if the same script to add html to the toolbar class when I try from the developer console, the button being added. But from angular its not working

So here what I did wrong or how to fix this?