Incorporating the ng-surveys template into my Angular application via has been successful. However, I encountered an issue where when using the template selector *ngFor to display multiple surveys on the same page, the browser treats all the surveys as identical. Any changes made to one survey reflect across all of them.
I attempted to dynamically integrate the template using Angular ComponentResolver but faced several errors along the way. I'm uncertain if this approach will resolve the problem. https://i.sstatic.net/eJwia.png https://i.sstatic.net/n19ls.png
create-assignment.component.html:
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<i class="fa fa-file-text-o fa-lg"></i> Questionnaires
</div>
<div class="card-body">
<tabset>
<tab *ngFor="let survey of surveys; let i = index">
<ng-template tabHeading><img [src]="survey.category_icon"/> {{survey.category_name}}</ng-template>
<!-- <app-create-survey></app-create-survey> -->
<!-- <ng-template #dynamic></ng-template> -->
<ngs-builder-viewer [options]="options"></ngs-builder-viewer>
</tab>
</tabset>
</div>
</div>
</div>
</div>
create-assignment.component.ts:
import { Component, OnInit, ViewChild, ViewContainerRef, Inject, AfterViewInit, AfterViewChecked } from '@angular/core';
import { LocalStoreService } from '../../../shared/services/local-store.service';
import { ApplicationService } from '../../../shared/services/application.service';
import { NgbDateParserFormatterService } from '../../../shared/services/ngb-date-parser-formatter.service';
import { Router } from '@angular/router';
import { ToastrService } from 'ngx-toastr';
import { IBuilderOptions, NgSurveyState, IElementAndOptionAnswers } from '../../../shared/ng-surveys/models';
import { Observable } from 'rxjs';
// Rest of the component code remains unchanged
To address the issue, I aim to differentiate each survey so that they do not mirror each other's changes.