<div class="p-image-children-editor"> <h5 style="margin-left: 2.5%;"> preview: </h5> <div class="preview-box" #wrap> <canvas id="canvas" #canvas></canvas> </div> <div nz-row nzType="flex" nzAlign="middle"> <div nz-col nzSpan="5" nzOffset="1"> <h5> add background: </h5> <div class="bg-box"> <app-upload-image-with-preview [picUrl]="bgItem.url" (imageUploaded)="onBackgroundUploadSuccess($event)"> </app-upload-image-with-preview> </div> </div> <div nz-col nzSpan="5" nzOffset="1" class="img-box" *ngFor="let it of hotZoneArr; let i = index" > <div style=" height: 40px;"> <h5> item-{{i+1}} <i style="margin-left: 20px; margin-top: 2px; float: right; cursor:pointer" (click)="deleteItem($event, i)" nz-icon [nzTheme]="'twotone'" [nzType]="'close-circle'" [nzTwotoneColor]="'#ff0000'"></i> </h5> </div> <!--<div class="img-box-upload">--> <!--<app-upload-image-with-preview--> <!--[picUrl]="it.pic_url"--> <!--(imageUploaded)="onImgUploadSuccessByImg($event, it)">--> <!--</app-upload-image-with-preview>--> <!--</div>--> <!--<app-audio-recorder--> <!--[audioUrl]="it.audio_url ? it.audio_url : null "--> <!--(audioUploaded)="onAudioUploadSuccessByImg($event, it)"--> <!--></app-audio-recorder>--> </div> <div nz-col nzSpan="5" nzOffset="1"> <div class="bg-box"> <button nz-button nzType="dashed" (click)="addBtnClick()" class="add-btn"> <i nz-icon nzType="plus-circle" nzTheme="outline"></i> <!--Add Image--> Add hot zone </button> </div> </div> </div> <nz-divider></nz-divider> <div class="save-box"> <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" (click)="saveClick()"> <i nz-icon type="save"></i> Save </button> </div> </div>