survery-lib 0.1.9 → 0.1.11

package/src/lib/components/question-check-box-template/question-check-box-template.component.ts

@@ -0,0 +1,124 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { SurveyAnswerDto } from '../../../shared/dtos/survey-answer.dto';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import {
+  AnswerChildOfQuestionCheckBoxTemplateFormInterface,
+  QuestionCheckBoxTemplateFormInterface
+} from '../../../shared/form-interfaces/question-check-box-template.form-interface';
+import { QuestionRadioButtonTemplateFormInterface } from '../../../shared/form-interfaces/question-radio-button-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { v4 as guidGenerator } from 'uuid';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { AnswerChildOfQuestionBooleanTemplateFormInterface } from '../../../shared/form-interfaces/question-boolean-template.form-interface';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-check-box-template',
+  templateUrl: './question-check-box-template.component.html',
+  styleUrls: ['./question-check-box-template.component.scss']
+})
+export class QuestionCheckBoxTemplateComponent implements OnInit {
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionCheckBoxTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.surveyQuestion = value;
+    this.rForm.patchValue({
+      id: value.questionId,
+      name: value.questionName,
+      title: value.questionTitle,
+      typeId: value.questionTypeId,
+      description: value.questionDescription
+    });
+
+    value.surveyAnswers.forEach(surveryAnswer => {
+      this.fCtrls.answerArray.push(this._formBuilder.group<AnswerChildOfQuestionCheckBoxTemplateFormInterface>({
+        id: [surveryAnswer.answerId],
+        title: [surveryAnswer.answerTitle],
+        isSelected: [false]
+      }))
+    })
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder, private _surveyLibService: SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionCheckBoxTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null],
+      answerArray: this._formBuilder.array<AnswerChildOfQuestionCheckBoxTemplateFormInterface>([])
+    });
+  }
+
+  ngOnInit(): void {
+    this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+      const formValue = this.rForm.value;
+      this.emitter.emit({
+        QuestionId: formValue.id,
+        IsValid: this.fCtrls.answer.valid,
+        Answer: value
+      })
+    });
+
+    this.fCtrls.answer.setValue(null);
+
+    this._surveyLibService.surveyAnswersObsrv
+      .pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
+      .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
+      .subscribe(answer => {
+        const distinctArray = answer.AnswerIdArr.filter((n, i) => answer.AnswerIdArr.indexOf(n) === i);
+        this.fCtrls.answer.setValue(distinctArray);
+
+        answer.AnswerIdArr.forEach(answerId => {
+          const groupIndex = this.fCtrls.answerArray.value.findIndex(x => x.id == answerId);
+          if (groupIndex > -1) {
+            this.fCtrls.answerArray.at(groupIndex).controls.isSelected.setValue(true);
+          }
+        });
+      })
+  }
+
+  onChangeAnswer(item: AnswerChildOfQuestionBooleanTemplateFormInterface, event: Event) {
+    var answerArr: number[] = this.fCtrls.answer.value || [];
+
+    if ((event.target as any).checked == true) {
+      answerArr.push(item.id);
+    } else {
+      answerArr = answerArr.filter(x => x != item.id);
+    }
+
+    answerArr = answerArr.length == 0 ? [] : answerArr;
+    this.fCtrls.answer.setValue(answerArr);
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.html

@@ -0,0 +1,10 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="text-quastion">
+        <ng-select [items]="this.fCtrls.answerArray.value" bindValue="id" bindLabel="title"  class="form-control"
+         [formControl]="convertToFormControl(fCtrls.answer)"  [disabled]="isDisabled" [multiple]="true">
+         </ng-select>
+    </div>
+</div>

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.scss

@@ -0,0 +1,3 @@
+.text-quastion .form-control {
+    padding: 10px; 
+}

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionDropdownMultiTemplateComponent } from './question-dropdown-multi-template.component';
+
+describe('QuestionDropdownMultiTemplateComponent', () => {
+  let component: QuestionDropdownMultiTemplateComponent;
+  let fixture: ComponentFixture<QuestionDropdownMultiTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionDropdownMultiTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionDropdownMultiTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-dropdown-multi-template/question-dropdown-multi-template.component.ts

@@ -0,0 +1,100 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {  FormControl } from '@angular/forms';
+import { FormGroup, Validators , FormBuilder} from '@ng-stack/forms';
+import { QuestionCheckBoxTemplateFormInterface } from '../../../shared/form-interfaces/question-check-box-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { v4 as guidGenerator } from 'uuid';
+import { AnswerChildOfQuestionDropDownMultiTemplateFormInterface, QuestionDropDownMultiTemplateFormInterface } from '../../../shared/form-interfaces/question-dropdown-multi-template.form-interface';
+import { SurveyLibService } from '../../services/survey-lib.service';
+import { AnswerChildOfQuestionBooleanTemplateFormInterface } from '../../../shared/form-interfaces/question-boolean-template.form-interface';
+
+@Component({
+  selector: 'lib-question-dropdown-multi-template',
+  templateUrl: './question-dropdown-multi-template.component.html',
+  styleUrls: ['./question-dropdown-multi-template.component.scss']
+})
+export class QuestionDropdownMultiTemplateComponent {
+  
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionDropDownMultiTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.surveyQuestion = value;
+    this.rForm.patchValue({
+      id: value.questionId,
+      name: value.questionName,
+      title: value.questionTitle,
+      typeId: value.questionTypeId,
+      description: value.questionDescription
+    });
+
+    value.surveyAnswers.forEach(surveryAnswer => {
+      this.fCtrls.answerArray.push(this._formBuilder.group<AnswerChildOfQuestionDropDownMultiTemplateFormInterface>({
+        id: [surveryAnswer.answerId],
+        title: [surveryAnswer.answerTitle],
+        isSelected: [false]
+      }))
+    })
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder, private _surveyLibService: SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionDropDownMultiTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null],
+      answerArray: this._formBuilder.array<AnswerChildOfQuestionDropDownMultiTemplateFormInterface>([])
+    });
+  }
+
+  ngOnInit(): void {
+    this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+      const formValue = this.rForm.value;
+      this.emitter.emit({
+        QuestionId: formValue.id,
+        IsValid: this.fCtrls.answer.valid,
+        Answer: value
+      })
+    });
+
+    this.fCtrls.answer.setValue(null);
+
+    this._surveyLibService.surveyAnswersObsrv
+      .pipe(map(x => x.defaultAnswers.filter(x => x.QuestionId == this.fCtrls.id.value)))
+      .pipe(filter(x => x.length > 0)).pipe(map(x => x.at(0)))
+      .subscribe(answer => {
+        const distinctArray = answer.AnswerIdArr.filter((n, i) => answer.AnswerIdArr.indexOf(n) === i);
+        this.fCtrls.answer.setValue(distinctArray);
+      })
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-dropdown-template/question-dropdown-template.component.html

@@ -0,0 +1,10 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="text-quastion">
+        <select class="form-control" [formControl]="convertToFormControl(fCtrls.answer)"  [disabled]="isDisabled">
+            <option *ngFor="let item of surveyQuestion?.surveyAnswers" [value]="item.answerId">{{item.answerTitle}}</option>
+        </select>
+    </div>
+</div>

package/src/lib/components/question-dropdown-template/question-dropdown-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionDropdownTemplateComponent } from './question-dropdown-template.component';
+
+describe('QuestionDropdownTemplateComponent', () => {
+  let component: QuestionDropdownTemplateComponent;
+  let fixture: ComponentFixture<QuestionDropdownTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionDropdownTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionDropdownTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-dropdown-template/question-dropdown-template.component.ts

@@ -0,0 +1,87 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionDropdownTemplateFormInterface } from '../../../shared/form-interfaces/question-dropdown-template.form-interface';
+import { QuestionRadioButtonTemplateFormInterface } from '../../../shared/form-interfaces/question-radio-button-template.form-interface';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-dropdown-template',
+  templateUrl: './question-dropdown-template.component.html',
+  styleUrls: ['./question-dropdown-template.component.scss']
+})
+export class QuestionDropdownTemplateComponent implements OnInit {
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionDropdownTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.surveyQuestion = value;
+    this.rForm.patchValue({
+      id: value.questionId,
+      name: value.questionName,
+      title: value.questionTitle,
+      typeId: value.questionTypeId,
+      description: value.questionDescription
+    });
+
+    if (value.isRequired == true) {
+      this.fCtrls.answer.addValidators([Validators.required]);
+      this.fCtrls.answer.updateValueAndValidity();
+    }
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder ,private  _surveyLibService :SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionDropdownTemplateFormInterface>({
+      id: [null],
+      name: [null],
+      title: [null],
+      typeId: [null],
+      description: [null],
+      answer: [null] 
+    });
+  }
+
+  ngOnInit(): void {
+    this.fCtrls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+      const formValue = this.rForm.value;
+      this.emitter.emit({
+        QuestionId: formValue.id,
+        IsValid: this.fCtrls.answer.valid,
+        Answer: value
+      })
+    });
+
+    this.fCtrls.answer.setValue(null);
+
+    this._surveyLibService.surveyAnswersObsrv
+    .pipe(map(x=> x.defaultAnswers.filter(x=>x.QuestionId == this.fCtrls.id.value)))
+    .pipe(filter(x=>x.length  > 0)).pipe(map(x=> x.at(0)))
+    .subscribe(answer=>{
+      this.fCtrls.answer.setValue(answer.AnswerId);
+    })
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-matrix-template/question-matrix-template.component.html

@@ -0,0 +1,36 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value" style=" border-collapse: collapse;"
+[ngClass]="{'d-none':isShow != true}">
+  <h3 class="quastion-title ">
+    {{surveyQuestion?.questionTitle}}
+  </h3>
+  <div class="matrix-question" [formGroup]="rForm">
+    <div class="matrix-table" formArrayName="subQuestionArray">
+      <div class="matrix-head-row">
+        <div class="matrix-col">
+        </div>
+        <div class="matrix-col" *ngFor="let answers of surveyQuestion?.surveyAnswers">
+          {{answers.answerTitle}}
+        </div>
+      </div>
+
+      <div class="matrix-row"
+        *ngFor="let questionGroup of fCtrls.subQuestionArray.controls ;let subQuestionIndex = index"
+        [ngClass]="{'invalid-question': questionGroup.controls.answer.invalid}">
+        <div class="matrix-col matrix-sub-quastion">
+          {{questionGroup.value.questionTitle}}
+        </div>
+        <div class="matrix-col" *ngFor="let answer of surveyQuestion?.surveyAnswers;let answerIndex = index">
+          <div class="form-check form-check-radio form-check-inline">
+            <input class="form-check-input" type="radio" name="{{elemId}}__radio-btn-option_{{subQuestionIndex}}"
+              id="{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}" (change)="onChangeAnswer(questionGroup.value ,answer)"
+              value="{{answer.answerId}}"  [checked]="answer.answerId == questionGroup.value.answer">
+            <label class="form-check-label d-md-inline d-lg-none"
+              for="{{elemId}}__radio-btn_{{subQuestionIndex}}_{{answerIndex}}"> {{answer.answerTitle}}</label>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</div>

package/src/lib/components/question-matrix-template/question-matrix-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionMatrixTemplateComponent } from './question-matrix-template.component';
+
+describe('QuestionMatrixTemplateComponent', () => {
+  let component: QuestionMatrixTemplateComponent;
+  let fixture: ComponentFixture<QuestionMatrixTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionMatrixTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionMatrixTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/question-matrix-template/question-matrix-template.component.ts

@@ -0,0 +1,110 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@ng-stack/forms';
+import { SurveyAnswerDto } from '../../../shared/dtos/survey-answer.dto';
+import { SurveyQuestionGroupDto } from '../../../shared/dtos/survey-question-group.dto';
+import { SurveyQuestionDto } from '../../../shared/dtos/survey-question.dto';
+import { SurveySubQuestionDto } from '../../../shared/dtos/survey-sub-question.dto';
+import { QuestionTypeEnum } from '../../../shared/enums/question-type.enum';
+import { QuestionMatrixTemplateFormInterface, SubQuestionChildOfQuestionMatrixTemplateFormInterface } from '../../../shared/form-interfaces/question-matrix-template.form-interface';
+import { QuestionAnswerModel } from '../../../shared/models/question-answer.model';
+import { v4 as guidGenerator } from 'uuid';
+import { DefaultQuestionAnswerDto } from '../../../shared/dtos/default-question-answers.dto';
+import { debounceTime, distinctUntilChanged, filter, map } from 'rxjs';
+import { SurveyLibService } from '../../services/survey-lib.service';
+
+@Component({
+  selector: 'lib-question-matrix-template',
+  templateUrl: './question-matrix-template.component.html',
+  styleUrls: ['./question-matrix-template.component.scss']
+})
+export class QuestionMatrixTemplateComponent implements OnInit {
+  elemId = guidGenerator() as string;
+  surveyQuestion: SurveyQuestionDto;
+  rForm: FormGroup<QuestionMatrixTemplateFormInterface>;
+
+  get fCtrls() {
+    return this.rForm.controls;
+  }
+
+  get questionTypeEnum() {
+    return QuestionTypeEnum;
+  }
+
+  @Output() emitter = new EventEmitter<QuestionAnswerModel>();
+
+  @Input() isShow: boolean = true;
+  @Input() isDisabled: boolean = false;
+  @Input() set setQuestion(value: SurveyQuestionDto) {
+    this.surveyQuestion = value;
+    this.rForm.patchValue({
+      id: value.questionId,
+      typeId: value.questionTypeId
+    });
+
+    value.surveySubQuestions.forEach(x => {
+      var group = this._formBuilder.group<SubQuestionChildOfQuestionMatrixTemplateFormInterface>({
+        subQuestionId: [x.questionId],
+        questionTitle: [x.questionTitle],
+        answer: [null],
+      });
+
+      if (value.isRequired == true) {
+        group.controls.answer.addValidators([Validators.required]);
+        group.controls.answer.updateValueAndValidity();
+      }
+
+      group.controls.answer.valueChanges.pipe().pipe(debounceTime(200)).subscribe(value => {
+        const formValue = this.rForm.value;
+        this.emitter.emit({
+          QuestionId: group.value.subQuestionId,
+          Answer: group.value.answer,
+          IsValid: group.controls.answer.valid
+        });
+      });
+
+      this.fCtrls.subQuestionArray.push(group);
+    });
+
+    this.isShow = value.isVisable;
+    this.isDisabled = value.isReadOnly;
+  }
+
+  constructor(private _formBuilder: FormBuilder , private _surveyLibService:SurveyLibService) {
+    this.rForm = this._formBuilder.group<QuestionMatrixTemplateFormInterface>({
+      id: [null],
+      typeId: [null],
+      subQuestionArray: this._formBuilder.array<SubQuestionChildOfQuestionMatrixTemplateFormInterface>([])
+    });  
+  }
+  ngOnInit(): void {
+    this._surveyLibService.surveyAnswersObsrv
+    .pipe(map(x=> x.defaultAnswers.filter(x=>x.ParentQuestionId == this.fCtrls.id.value)))
+    .pipe(filter(x=>x.length  > 0))
+    .subscribe(answers=>{
+      this.fCtrls.subQuestionArray.controls.forEach(group => {
+        var answer = answers.find(x => x.QuestionId == group.value.subQuestionId);
+        if (answer != null) {
+          group.controls.answer.setValue(answer.AnswerId);
+        }
+      })
+    })
+  }
+
+  onChangeAnswer(question: SubQuestionChildOfQuestionMatrixTemplateFormInterface, answer: SurveyAnswerDto) {
+    const index = this.fCtrls.subQuestionArray.value.findIndex(x => x.subQuestionId == question.subQuestionId);
+    var subQuestionGroup = this.fCtrls.subQuestionArray.controls[index];
+
+    subQuestionGroup.controls.answer.setValue(answer.answerId);
+
+    this.emitter.emit({
+      QuestionId: subQuestionGroup.value.subQuestionId,
+      Answer: subQuestionGroup.value.answer,
+      IsValid: subQuestionGroup.controls.answer.valid
+    });
+  }
+
+  convertToFormControl(element: any) {
+    return element as FormControl;
+  }
+}

package/src/lib/components/question-radio-button-template/question-radio-button-template.component.html

@@ -0,0 +1,13 @@
+<div class="quastion" [attr.id]="'question_'+fCtrls.id.value"  [ngClass]="{'invalid-question': fCtrls.answer.invalid  , 'd-none':isShow != true}">
+    <h3 class="quastion-title ">
+        {{fCtrls.title.value}}
+    </h3>
+    <div class="radio-button-quastion">
+        <div class="form-check form-check-radio form-check-inline" 
+        *ngFor="let item of  fCtrls.answerArray.controls;let i = index">
+            <input class="form-check-input" type="radio" (change)="onChangeAnswer(item.value)"  [disabled]="isDisabled"
+                name="{{elemId}}__radio-btn-option" id="{{elemId}}__radio-btn_{{i}}" [checked]="item.value.isSelected == true? true : null">
+            <label class="form-check-label" for="{{elemId}}__radio-btn_{{i}}">{{item.value.title}}</label>
+        </div>
+    </div>
+</div>

package/src/lib/components/question-radio-button-template/question-radio-button-template.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuestionRadioButtonTemplateComponent } from './question-radio-button-template.component';
+
+describe('QuestionRadioButtonTemplateComponent', () => {
+  let component: QuestionRadioButtonTemplateComponent;
+  let fixture: ComponentFixture<QuestionRadioButtonTemplateComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [QuestionRadioButtonTemplateComponent]
+    });
+    fixture = TestBed.createComponent(QuestionRadioButtonTemplateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});