Newer
Older
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { LikertElement } from '../../models/compound-elements/likert-element';
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@Component({
selector: 'app-likert',
template: `
<div [style.display]="'grid'"
[style.grid-template-columns]="'2fr ' + '1fr '.repeat(elementModel.answers.length)">
<div [style.display]="'grid'"
[style.grid-template-columns]="'2fr ' + '1fr '.repeat(elementModel.answers.length)"
[style.grid-column-start]="1"
[style.grid-column-end]="elementModel.answers.length + 2"
[style.grid-row-start]="1"
[style.grid-row-end]="2">
<div *ngFor="let answer of elementModel.answers; let i = index" class="answers"
[style.grid-column-start]="2 + i"
[style.grid-column-end]="3 + i"
[style.grid-row-start]="1"
[style.grid-row-end]="2">
<img *ngIf="answer.imgSrc && answer.position === 'above'" [src]="answer.imgSrc" alt="Image Placeholder"
[style.object-fit]="'scale-down'"
[width]="200">
{{answer.text}}
<img *ngIf="answer.imgSrc && answer.position === 'below'" [src]="answer.imgSrc" alt="Image Placeholder"
[style.object-fit]="'scale-down'"
[width]="200">
</div>
</div>
<ng-container *ngFor="let question of elementModel.questions; let i = index">
<app-likert-radio-button-group [style.display]="'grid'"
[style.grid-column-start]="1"
[style.grid-column-end]="elementModel.answers.length + 2"
[style.grid-row-start]="2 + i"
[style.grid-row-end]="3 + i"
[elementModel]="elementModel.questions[i]"
[parentForm]="parentForm">
</app-likert-radio-button-group>
</ng-container>
</div>
`,
styles: [
'.odd {background-color: #D0F6E7;}',
'.answers {text-align: center;}',
'::ng-deep app-likert mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}'
]
})
export class LikertComponent {
elementModel!: LikertElement;
parentForm!: FormGroup;
}