Calling child from parent in order based on attribute from api

I'm working on an angular application.

I've an array returning several questions that are being processed on the basis of their type and then being passed on to their respective child so it can display the data.

main-activity.component.ts

textBasedActivity = []; mcqActivity = []; fillInTheBlanks = []; dragndropActivity = [];

  extractTypes() {
    this.resultActivity.widgets.forEach((element) => {
      if (element.questionType == 'mcqType') {
        this.mcqActivity.push(element);
      } else if (
        element.questionType == 'textType' ||
        element.questionType == 'imageType'
      ) {
        this.textBasedActivity.push(element);
      } else if (element.questionType == 'fillBlankType') {
        this.fillInTheBlanks.push(element);
      } else if (element.questionType == 'dragNDropType') {
        this.dragndropActivity.push(element);
      }
    });
  }

main-activity.html

<div class="each-activity-base">
   <app-text-based-widget *ngIf="textBasedActivity.length != 0" [courseId]="courseId" [activityId]="activityId"
   [moduleId]="moduleId" [studentData]="studentData" [activityObjects]="textBasedActivity">
   </app-text-based-widget>
   
<app-multiple-choice-based-widget *ngIf="mcqActivity.length != 0" [activityObjects]="mcqActivity">
       </app-multiple-choice-based-widget>
       
<app-drag-drop-based-widget *ngIf="dragndropActivity.length != 0" [activityObjects]="dragndropActivity">
       </app-drag-drop-based-widget>
       
<app-fill-blanks-based-widget *ngIf="fillInTheBlanks.length != 0" [activityObjects]="fillInTheBlanks">
       </app-fill-blanks-based-widget>
    </div>

When this is executed <app-text-based-widget> will always be displayed first and then the <app-multiple-choice-based-widget> and so on.

What I want to achieve is: Each of these types (coming from resultActivity.widgets) that are being sent in each array i.e textBasedActivity, mcqActivity etc they have an attribute called "position". If position is 1, then that specific child should be displayed first, if position is 2 then that child should be displayed second and so on.

Summary: How to use the "position: integer" attribute from an object to display a child in that specific order.