<nz-form-item> <nz-form-label [nzSpan]="4">Vocabulary</nz-form-label> <nz-form-control [nzSpan]="8"> <app-upload-image-with-preview [picUrl]="item.contentObj.pic_id" (imageUploaded)="onHandleQuestionImage($event)" ></app-upload-image-with-preview> <input type="text" nz-input placeholder="Please input title" [(ngModel)]="item.contentObj.title" (blur)="updateQuestionTitle()"> </nz-form-control> <app-audio-recorder [audioUrl]="item.contentObj.question_audio_id" (audioUploaded)="onHandleQuestionOptionItemAudio($event)"> </app-audio-recorder> </nz-form-item> <nz-form-item> <nz-form-label [nzSpan]="4">Option</nz-form-label> <nz-form-control [nzSpan]="20"> <button nz-button nzType="default" (click)="addNewOptionItem()" [disabled]="options.length >= 4" > <i class="anticon anticon-plus-circle-o"></i> Add </button> <div class="opt-container"> <div class="opt-wrap" *ngFor="let item of options; let i = index" > <div class="tool-bar"> <label nz-checkbox [ngModel]="item.right" (ngModelChange)="setRightAnswer(i)" class="right-answer"> Right </label> <div class="button-group"> <button nz-button nzType="primary" nzSize="small" nzShape="circle" style="margin-right: 1rem;" (click)="onHandleSwitchContent(item)" > <i class="anticon anticon-retweet"></i> </button> <nz-dropdown [nzTrigger]="'click'"> <button nz-button nzType="primary" nzSize="small" nzShape="circle" nz-dropdown > <i class="anticon anticon-setting"></i> </button> <ul nz-menu> <li nz-menu-item (click)="onMovePage(i, -1)" [class.disabled]="i < 1"> <i class="anticon anticon-arrow-up"></i> Move Up </li> <li nz-menu-item (click)="onMovePage(i, 1)" [class.disabled]="i + 1 >= options.length"> <i class="anticon anticon-arrow-down"></i> Move Down </li> <li nz-menu-item (click)="onDeleteCoursewareItem(i)"> <i class="anticon anticon-delete"></i> Delete </li> </ul> </nz-dropdown> </div> </div> <div class="content-editor"> <input *ngIf="item.type === OPTION_TYPE.TEXT" type="text" nz-input [(ngModel)]="item.text" placeholder="Please input title" (blur)="updateOptionItemText(i)"> <app-upload-image-with-preview *ngIf="item.type === OPTION_TYPE.PIC" [picUrl]="item.pic_id" (imageUploaded)="onHandleOptionItemImage($event, i)" ></app-upload-image-with-preview> <app-audio-recorder *ngIf="item.type === OPTION_TYPE.AUDIO" [audioUrl]="item.audio_id" (audioUploaded)="onHandleOptionItemAudio($event, i)"> </app-audio-recorder> </div> </div> </div> </nz-form-control> </nz-form-item>