File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Constructor
constructor(sanitizer: DomSanitizer)
|
|
|
Parameters :
| Name |
Type |
Optional |
| sanitizer |
DomSanitizer
|
No
|
|
Outputs
|
deleteAttachment
|
Type : EventEmitter
|
|
|
Methods
|
delete
|
delete(data, index)
|
|
|
Parameters :
| Name |
Optional |
| data |
No
|
| index |
No
|
|
|
getImgContent
|
getImgContent(file)
|
|
|
|
|
|
limit
|
Type : number
|
Default value : 2
|
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-attachment-card',
templateUrl: './attachment-card.component.html',
styleUrls: ['./attachment-card.component.scss'],
})
export class AttachmentCardComponent implements OnInit {
@Input() data: any;
@Input() viewOnly: any;
@Output() deleteAttachment = new EventEmitter()
limit = 2;
constructor(
private sanitizer: DomSanitizer,
) { }
ngOnInit() {}
getImgContent(file) {
return this.sanitizer.bypassSecurityTrustUrl(file);
}
delete(data, index) {
this.deleteAttachment.emit({ data: data, index: index });
}
loadMore(){
console.log(this.data,'loadmore',this.data.attachments.length);
this.limit=this.data.attachments.length;
}
}
<ion-card class="attachments-card" *ngIf="data?.attachments?.length || data?.remarks">
<ion-card-header class="project-card _capitalize">
{{data.title | titlecase}}
</ion-card-header>
<ion-card-content>
<ion-row>
<ion-col size="12" *ngIf="data?.remarks">
{{data.remarks}}
</ion-col>
<ion-col size="6" class="img-wrapper" *ngFor="let attachment of data.attachments| slice:0:limit; let i=index;">
<ion-card>
<ion-card-content>
<div >
<ion-icon class="close-icon" *ngIf="!viewOnly" name="close-circle" (click)="delete(attachment,i)"></ion-icon>
</div>
<img [src]="getImgContent(attachment?.localUrl)"
*ngIf="attachment.type.includes('image') && !attachment.url" alt=""/>
<img [src]="attachment?.url" *ngIf="attachment.type.includes('image') && attachment.url" alt=""/>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-card-content>
<div class="button-flex-div">
<ion-button class="view-more custom-btn-txt-transform-none" expand="block" fill="outline" (click)="loadMore()"
*ngIf="data?.attachments?.length>2 && limit <=2 ">
{{ 'FRMELEMNTS_BTN_LOAD_MORE_IMAGES' | translate }}
</ion-button>
</div>
</ion-card>
@import "../../../../../assets/styles/variables";
.attachments-card{
border-radius: 16px;
background: $white-color;
ion-card-header{
font-size: 1rem;
border-bottom: 1px solid $gray-200;
padding: 10px;
font-weight:900;
margin-bottom: 15px;
}
}
img{
width: 100%;
height: 6.25rem;
}
.view-more {
--background: var(--app-primary-background) !important;
--border-color: var(--app-primary-medium) !important;
--color: var(--app-primary-medium) !important;
width: 90%;
border-radius: 5px !important;
}
ion-card{
margin: 0 0 10px 0;
}
.button-flex-div{
display: flex;
justify-content: center;
}
.close-icon{
font-size: 1.25rem;
float: right;
margin: 5px;
color: black;
margin-right: -10px;
}
.img-wrapper{
margin-top: 4px;
}
Legend
Html element with directive