projects/rebirth-ng/src/lib/file-upload/file-upload-preview.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| exportAs | fileUploadPreview |
| selector | re-file-upload-preview |
| templateUrl | ./file-upload-preview.component.html |
Methods |
Inputs |
Outputs |
disabled
|
Type: |
imgPreview
|
Type: |
previewWidth
|
Type: |
selectFiles
|
Type:
Default value: |
uploaded
|
Type: |
removeFile
|
$event type: EventEmitter
|
| onRemoveFile | ||||
onRemoveFile(fileItem: )
|
||||
|
Parameters :
Returns :
void
|
import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter } from '@angular/core';
import { SelectFileModel } from './file-upload.model';
@Component({
selector: 're-file-upload-preview',
templateUrl: './file-upload-preview.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
exportAs: 'fileUploadPreview'
})
export class FileUploadPreviewComponent {
@Input() imgPreview: boolean;
@Input() previewWidth: string;
@Input() uploaded: boolean;
@Input() disabled: boolean;
@Input() selectFiles: SelectFileModel[] = [];
@Output() removeFile = new EventEmitter<SelectFileModel>();
onRemoveFile(fileItem) {
if (!this.disabled) {
this.removeFile.emit(fileItem);
}
}
}
<div class="file-upload-preview">
<table class="table">
<tbody>
<tr *ngFor="let fileItem of selectFiles">
<td *ngIf="imgPreview">
<a [href]="fileItem.url" target="_blank">
<img *ngIf="fileItem.url" class="img-responsive" [src]="fileItem.url"
[attr.alt]="fileItem.name"
[style.width]="previewWidth"/>
</a>
</td>
<td>
<i *ngIf="uploaded" class="glyphicon glyphicon-ok text-success"></i> {{fileItem.name}}
</td>
<td>
{{fileItem.displaySize}}
</td>
<td>
<i class="glyphicon glyphicon-trash text-danger" [ngClass]="{disabled: disabled}"
(click)="onRemoveFile(fileItem)"></i>
</td>
</tr>
</tbody>
</table>
</div>