src/app/demo/demo.component.html
<div class="container">
<h1>{{i18n.t.home.demo}}</h1>
<div *ngIf="alertList">
<div *ngFor="let alert of alertList" class="alert alert-danger alert-dismissable">
<a class="close" (click)="removeAlert(alert)" aria-label="close">×</a>
{{i18n.interpolate(i18n.t.upload.error[alert.messageType], {fileName: alert.file.name})}}
</div>
</div>
<h1><code>ru-single-upload</code></h1>
<div class="row">
<div class="col-sm-6">
<h2>{{i18n.t.home.simpleUse}}</h2>
<ru-single-upload acceptedFiles="image/jpeg"
(onFileUpload)="updatePicture($event)"
(onFileRemove)="deletePicture()"
(onError)="addAlert($event)">
</ru-single-upload>
</div>
<div class="col-sm-6">
<h2>{{i18n.t.home.customUse}}</h2>
<ru-custom-single-upload (onFileUpload)="updatePicture($event)"
(onFileRemove)="deletePicture()"
(onError)="addAlert($event)"></ru-custom-single-upload>
</div>
</div>
<hr>
<h1><code>ru-image</code></h1>
<div class="row">
<div class="col-sm-6">
<h2>{{i18n.t.home.simpleUse}}</h2>
<ru-custom-image [src]="picture"></ru-custom-image>
</div>
<div class="col-sm-6">
<h2>{{i18n.t.home.advancedUse}}</h2>
<ru-custom-image [src]="picture"
dimensions="400x400"
quality="10"
roundedCorners="100" background="10,10,255"
watermark="https://www.renuo.ch/images/logo.png">
</ru-custom-image>
</div>
</div>
</div>
<div class="container">
<h1><code>ru-multi-upload</code></h1>
<h2>{{i18n.t.home.simpleUse}}</h2>
<div class="ru-upload">
<ru-multi-upload (onFileUpload)="updatePictures($event)"
(onError)="addAlert($event)"></ru-multi-upload>
</div>
<h2>{{i18n.t.home.customUse}}</h2>
<ru-custom-multi-upload
(onFileUpload)="updatePictures($event)"
(onError)="addAlert($event)"></ru-custom-multi-upload>
<h2>{{i18n.t.home.customUse}}</h2>
<ru-custom-image-multi-upload
maxFilesAllowed="8"
acceptedFiles="image/jpeg, image/png"
(onFileUpload)="updatePictures($event)"
(onError)="addAlert($event)"></ru-custom-image-multi-upload>
<hr>
<h1><code>ru-gallery</code>
<div class="btn btn-primary" (click)="addDefaultPictureToGallery()">{{i18n.t.home.addImage}}</div>
</h1>
<h2>{{i18n.t.home.simpleUse}}</h2>
<ru-gallery [images]="pictures" [showPreview]="false" spacing="10"
roundedCorners="15"
thumbnailDimensions="300x200"></ru-gallery>
<h2>{{i18n.t.home.advancedUse}}</h2>
<br>
</div>
<div class="gallery">
<ru-gallery [images]="pictures" spacing="1"></ru-gallery>
</div>