How to add new input fields for lists and pass those data to dialog in angular 14

Question

I need to add new input fields for some ordered lists and pass those list data to dialog(from parent to child component) in angular 14

Parent component:

Ordered Lists

    <input formControlName="orderlistTitle" [(ngModel)]="orderlistTitle" maxlength="50" (ngModelChange)="hypenUpdate($event)" class="overviewTitle" type="text" [disabled]="isDisabled"/>

    <img (click)="openOrderlistDialog()" class="expand" src="assets/img/expand.svg"/>
    <i class="fa fa-times close" aria-hidden="true" (click)="isOrderlist = !isOrderlist; orderlist = ''; orderlistTitle =''"></i>
    <!-- <input formControlName="orderlist" type="text" [(ngModel)]="orderlist" class="text-size form-control createDoc" name="title" oninput="this.value = this.value.replace(/[^A-Za-z0-9-_/#&+()@!$%*|+=^?`~<>,. ]|^ /g,'')"> -->
    
    <input formControlName="orderlist" type="text" [(ngModel)]="orderlist" class="text-size form-control createDoc">
    <div *ngFor="let listItem of orderListItems; let i = index" style="margin-bottom: 10px;margin-top: 10px;">
        <input formControlName="orderlist" type="text" [(ngModel)]="orderListItems[i]" class="text-size form-control createDoc">
    </div>

    <div><img class="addBtn" (click)="addList()" src="assets/img/addnotes.svg"/> <p class="addMore">Add More</p>
    </div>
  </div>

Child component:

    <div class="form-group">
    <label for="title" class="lableTitle">Text</label>

    <input formControlName="orderlist" type="text" [(ngModel)]="orderlist" class="text-size form-control createDoc">
    <div *ngFor="let listItem of orderListItems; let i = index" style="margin-bottom: 10px;margin-top: 10px;">
        <input formControlName="orderlist" type="text" [(ngModel)]="orderListItems[i]" class="text-size form-control createDoc">
    </div>
    <div><img class="addBtn" (click)="addList()" src="assets/img/addnotes.svg"/> <p class="addMore">Add More</p></div>
    
    </div>