How to append dynamically created element in angular

I am developing script of n-leve of nested tables using div.

So there are 5 to 6 columns with n number of rows, every first column have expand/collapse button, on click of which i make call to api which gives me data respective to selected row filters.

Previously when i worked with core javascript and jquery, i was using find method of document selector to identify parent of expand/collapse button and push dynamically created html after that specific div only using innerHTML or append method of jquery

I am bit new to angular and haven't worked much. Please help me resolve this thing

<div class="table" >
<div class="row" *ngFor="let rData of reportData; let i = index;" >
        <div class="col" >

            <button 
                 class="btn btn-sm" 
                 *ngIf="checkIfHaveMoreSplits(splitbykey) !== 0"
                 (click)="splitData(splitbykey)"
                >+</button>
            
        </div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>

</div>

Here is code which i have written.

I am managing one array which identifies how deep i can expand collapse element

Let us assume that array have three elements namely country,carrier and os

So first table which i will draw having all the countries in table with expand button on click of which i will send selected country and get carriers of that specific country. After getting response i want to create custom html based on response and append html after selected row.

Sorry for bad english.

Please help.