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>

Why dont you create a separate component including the mentioned data as Inputs to it — Nugu
– Nugu, Commented Jun 2, 2017 at 12:04
@nugu post good answer while I was typing some code as answer. You can have a look below. — mankers
– mankers, Commented Jun 2, 2017 at 12:16

Sampath · Accepted Answer · 2017-06-03 04:59:17Z

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 }

Collectives™ on Stack Overflow

Angular dynamic template

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related