Development documentation
  1. Components
  2. UppModalCropComponent

File

libs/upp-wdgt/src/components/upp-image/upp-image.ts

Description

The UppModalCropComponent is a modal component used for cropping images. It is designed to work within an Ionic modal context and accepts an image and its desired dimensions.

This component extends the languageSupport class, providing multi-language support. It interacts with Ionic's ModalController for presenting and dismissing the modal.

Example :
```typescript
const modal = await this.modalCtrl.create({
    component: UppModalCropComponent,
    componentProps: {
        image: imageData,
        height: 200,
        width: 200
    }
});

modal.onDidDismiss().then((result) => { console.log('Cropped Image:', result.data); });

Example :

Extends

languageSupport

Implements

OnDestroy

Metadata

selector upp-modal-crop-image
styleUrls ./upp-modal.scss
templateUrl ./upp-modal.html

Index

Properties
Methods
Inputs

Constructor

constructor(lang: languageService, modalCtrl: ModalController, view: viewService)

Constructs the UppModalCropComponent and injects necessary dependencies.

Parameters :
Name Type Optional Description
lang languageService No

Language service for multi-language support.
modalCtrl ModalController No

Controller for managing the modal.
view viewService No

View service for UI-related functionalities.

Inputs

height
Type : number
Default value : 0

The desired height of the cropped image.
image
Type : any
Default value : null

The image to be cropped.
width
Type : number
Default value : 0

The desired width of the cropped image.

Methods

Async CloseModal
CloseModal()

Closes the modal without returning any data.

Returns : any
ngOnDestroy
ngOnDestroy()

Cleans up resources when the modal is destroyed.

Returns : void
Async OnCrop
OnCrop(data: any)

Dismisses the modal with the cropped image data.

Parameters :
Name Type Optional Description
data any No

The cropped image data.
Returns : any

Properties

Public _loaded
Default value : false

Indicates if the component has fully loaded.
Public view
Type : viewService
View service for UI-related functionalities.
 
<ion-header>
    <ion-toolbar>
        <ion-title>{{tr('@title_crop_image')}}</ion-title>
        <ion-buttons slot="end">
            <ion-button [attr.data-id]="'image-close-button'" (click)="CloseModal()">
                <ion-icon slot="icon-only" name="close"></ion-icon>
            </ion-button>        
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
    <div class="nno-scrollbar-y" [ngClass]="{ 'mobile': view.Mobile, 'show': view.Scrollbar }">
        <upp-crop-image [attr.data-id]="'image-crop-control'" [image]="image" [height]="height" [width]="width" (Cropped)="OnCrop($event)"></upp-crop-image>
    </div>
</ion-content>

./upp-modal.scss

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""