title: Calling child from parent in order based on attribute from api
body: <p>I'm working on an angular application.</p>
  <p>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.</p>
  <p>main-activity.component.ts</p>
  <pre><code>textBasedActivity = []; mcqActivity = []; fillInTheBlanks = []; dragndropActivity = [];
  
    extractTypes() {
      this.resultActivity.widgets.forEach((element) =&gt; {
        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);
        }
      });
    }
  </code></pre>
  <p>main-activity.html</p>
  <pre><code>&lt;div class=&quot;each-activity-base&quot;&gt;
     &lt;app-text-based-widget *ngIf=&quot;textBasedActivity.length != 0&quot; [courseId]=&quot;courseId&quot; [activityId]=&quot;activityId&quot;
     [moduleId]=&quot;moduleId&quot; [studentData]=&quot;studentData&quot; [activityObjects]=&quot;textBasedActivity&quot;&gt;
     &lt;/app-text-based-widget&gt;
     
  &lt;app-multiple-choice-based-widget *ngIf=&quot;mcqActivity.length != 0&quot; [activityObjects]=&quot;mcqActivity&quot;&gt;
         &lt;/app-multiple-choice-based-widget&gt;
         
  &lt;app-drag-drop-based-widget *ngIf=&quot;dragndropActivity.length != 0&quot; [activityObjects]=&quot;dragndropActivity&quot;&gt;
         &lt;/app-drag-drop-based-widget&gt;
         
  &lt;app-fill-blanks-based-widget *ngIf=&quot;fillInTheBlanks.length != 0&quot; [activityObjects]=&quot;fillInTheBlanks&quot;&gt;
         &lt;/app-fill-blanks-based-widget&gt;
      &lt;/div&gt;
  </code></pre>
  <p>When this is executed <code>&lt;app-text-based-widget&gt;</code> will always be displayed first and then the <code>&lt;app-multiple-choice-based-widget&gt;</code> and so on.</p>
  <p><strong>What I want to achieve is</strong>:
  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 &quot;<strong>position</strong>&quot;. 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.</p>
  <p><strong>Summary:</strong>
  How to use the &quot;position: integer&quot; attribute from an object to display a child in that specific order.</p>