Angular dynamic template

Question

I have a code snippet as shown below.Here I have put only 2 sections.I do have six such sections in my html file.Starting from here <div *ngIf="questionSubNumber=='a'"> is repeating part.So I need to put that into a generic template where I can use that when I need it.Can you tell me a better approach for this? I have to pass dynamic data like questionNumber,groupQuestion?.description etc into that template too.

.html

<div *ngIf="question?.type=='date' && !isSurveyDone && isShow">

      <div *ngIf="questionSubNumber=='a'">//need to put this into template
        <ion-list>
          <ion-list-header text-wrap>
            <span class="number">{{questionNumber}}</span> {{groupQuestion?.prompt}}
            <div class="description">{{groupQuestion?.description}}</div>
          </ion-list-header>
        </ion-list>
      </div>//need to put this into template

      <ion-list>
        <ion-list-header text-wrap>
         //other html code
      </ion-list>
    </div>

<div *ngIf="question?.type=='textfield' && !isSurveyDone && isShow">

      <div *ngIf="questionSubNumber=='a'">
        <ion-list>
          <ion-list-header text-wrap>
            <span class="number">{{questionNumber}}</span> {{groupQuestion?.prompt}}
            <div class="description">{{groupQuestion?.description}}</div>
          </ion-list-header>
        </ion-list>
      </div>

      <ion-list no-lines>
       //more html    
      </ion-list>
   </div>

Answer 1

OP's Answer:

.html

<group-question [questionSubNumber]="questionSubNumber" 
[questionNumber]="questionNumber" [groupQuestion]="groupQuestion"></group-
question>

.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'group-question',
  templateUrl: 'group-question.html'
})
export class GroupQuestionComponent {

  @Input() questionSubNumber: string;
  @Input() questionNumber: string;
  @Input() groupQuestion: any;

  constructor() {
  }

}

Original Answer:

You can create new component with template containing the html part you point us:

<div *ngIf="model.questionSubNumber=='a'">
  <ion-list>
    <ion-list-header text-wrap>
      <span class="number">{{model.questionNumber}}</span>{{model.prompt}}
      <div class="description">{{model.description}}</div>
     </ion-list-header>
   </ion-list>
</div>

Pass an object to it:

<foo-bar [model]="obj"></foo-bar>

where the object is defined as

{
    questionSubNumber: questionSubNumber,
    questionNumber: questionNumber,
    prompt: groupQuestion?.prompt,
    description: groupQuestion?.description
}