<eos-document-control [formControl]="form.controls.documents" [buttonRendererOptions]="{buttonText: '§§ Choose documents' | transloco }" [labelOnTop]="true" [mode]="'multiple'" [selectedOptionsRenderer]="selectedOptionsRendererTpl" label="{{ 'documents' | transloco }}" ></eos-document-control> <ng-template #selectedOptionsRendererTpl let-selectedDocuments> <div *ngFor="let document of selectedDocuments" class="flex mt-2 gap-half" > <div class="flex flex-1 justify-between"> {{ document.label }} <eos-icon (click)="removeDocument(document, $event)" class="m-0 cursor-pointer" icon="remove-circle-2" width="18" ></eos-icon> </div> </div> </ng-template> removeDocument(document: DocumentControlDocument, event: MouseEvent): void { event.stopPropagation(); const control = this.form.controls.documents; control.setValue(control.value.filter(value => value.id !== document.id)); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter