title: Integrate Ng-Survey multiple time inside the same component
body: <p>Im using ng-surveys template inside my angular application 
  <a href="https://ng-surveys.firebaseapp.com/" rel="nofollow noreferrer">https://ng-surveys.firebaseapp.com/</a>
  I put the template selector "" inside *ngFor to make multiple surveys in the same page.
  It works but the browser considers all the surveys as the same survey : whene I change something in one survey it changes in the other surveys.  </p>
  
  <p>I tried to integrate the template dynamicly using Angular ComponentResolver but I faced many errors and I'm not sure this way can fix my problem.
  <a href="https://i.stack.imgur.com/eJwia.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eJwia.png" alt="This a screenshots"></a>
  <a href="https://i.stack.imgur.com/n19ls.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n19ls.png" alt="This a screenshots"></a></p>
  
  <p>create-assignment.component.html:</p>
  
  <pre><code>&lt;div class="row"&gt;
                          &lt;div class="col-md-12"&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header"&gt;
                                  &lt;i class="fa fa-file-text-o fa-lg"&gt;&lt;/i&gt; Questionnaires
                              &lt;/div&gt;
                              &lt;div class="card-body"&gt;
                        &lt;tabset&gt;
                            &lt;tab *ngFor="let survey of surveys; let i = index"&gt;
                              &lt;ng-template tabHeading&gt;&lt;img [src]="survey.category_icon"/&gt; {{survey.category_name}}&lt;/ng-template&gt;
                              &lt;!-- &lt;app-create-survey&gt;&lt;/app-create-survey&gt; --&gt;
                              &lt;!-- &lt;ng-template #dynamic&gt;&lt;/ng-template&gt; --&gt;
                                &lt;ngs-builder-viewer [options]="options"&gt;&lt;/ngs-builder-viewer&gt;
                            &lt;/tab&gt;
                          &lt;/tabset&gt;
                        &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p>create-assignment.component.ts:</p>
  
  <pre><code>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';
  import { Survey } from '../../../shared/models/survey';
  import { LoaderService } from '../../../shared/services/loader.service';
  
  @Component({
    selector: 'app-create-assignment',
    templateUrl: './create-assignment.component.html',
    styleUrls: ['./create-assignment.component.scss']
  })
  export class CreateAssignmentComponent implements OnInit, AfterViewChecked {
    options: IBuilderOptions;
    assignment: any = {};
    pending: Boolean = false;
    user: any;
    shops: any = [];
    survey_categories: any = [];
    surveys: any = [];
    errors: any = {};
    service: any
    @ViewChild('dynamic', { 
      read: ViewContainerRef , static: false
    }) viewContainerRef: ViewContainerRef
  
    constructor(
      @Inject(LoaderService) service,
      private ls: LocalStoreService,
      public router: Router,
      public toastr: ToastrService,
      private dateService: NgbDateParserFormatterService,
      private appServ: ApplicationService
    ) {
      this.service = service
     }
  
     ngAfterViewChecked() {
      // this.service.setRootViewContainerRef(this.viewContainerRef)
      // this.service.addDynamicComponent()
     }
  
    ngOnInit() {
      this.options = {
        importSurvey: {
          callback: this.importSurvey.bind(this),
        },
        surveyButtons: [{
          title: 'Sauvegarder questionnaire',
          icon: 'i-Data-Save',
          text: 'Sauvegarder',
          callback: this.saveSurvey.bind(this),
        }],
        importElement: {
          callback: this.importElement.bind(this),
        },
        elementButtons: [{
          title: 'Sauvegarder question',
          icon: 'i-Data-Save',
          text: 'Sauvegarder',
          callback: this.saveElement.bind(this),
        }]
      };
      this.appServ.getSurveyCategories().subscribe((response: any) =&gt; {
        this.survey_categories = response.data;
        this.survey_categories.forEach(el =&gt; {
          this.surveys.push(new Survey(el.id, el.name, el.icon, this.options));
        });
      });
      this.user = this.ls.getItem('user');
      this.appServ.getBusinessShops(this.user).subscribe((response: any) =&gt; {
        this.shops = response.data;
      });
    }
  
    importSurvey(): Observable&lt;NgSurveyState&gt; {
      // Mocking get request
      return this.getSurvey();
    }
  
    importElement(): Observable&lt;IElementAndOptionAnswers&gt; {
      // Mocking get request
      return this.getElement();
    }
  
    getSurvey(): Observable&lt;NgSurveyState&gt; {
      return
    }
  
    getElement(): Observable&lt;IElementAndOptionAnswers&gt; {
      return 
    }
  
    saveSurvey(ngSurveyState: NgSurveyState): void {
      console.log(ngSurveyState);
    }
  
    saveElement(element: IElementAndOptionAnswers): void {
      // Add post request to save survey data to the DB
      console.log('element: ', element);
    }
  
    toObject = (map = new Map) =&gt;
    Array.from
      ( map.entries()
      , ([ k, v ]) =&gt;
          v instanceof Map
            ? { key: k, value: this.toObject (v) }
            : { key: k, value: v }
      )
  
  }
  </code></pre>
  
  <p>I want to make each survey not similar to other surveys</p>