Eldeeb Image Picker

This library was generated with Angular CLI grater than version ^12.0.0.

Import

import { ImagePickerModule } from 'ng-eldeeb-image-picker';


@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ImagePickerModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

angular.json (assets)

    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              {
                "glob": "**/*",
                "input": "./node_modules/ng-eldeeb-image-picker/assets",
                "output": "/assets/"
              }
            ],
            "styles": [],
            "scripts": [],
          },
          }
        }

Usage/Examples

App Component Ts

export class AppComponent implements OnInit {
  public readonly imgPicker:FormControl<string | File | null>= new FormControl();

  public ngOnInit(): void {
    this.imgPicker.valueChanges.subscribe(console.log);
  }

  public onImageError = ($event: ImagePickerError): void => {
    console.log($event);
  };
}

Simple case

  <image-picker
    class="h-[250px] w-[250px]"
    [formControl]="imgPicker"
    (error)="onImageError($event)"
  ></image-picker>

Dynamic content projection (More customization)

    <image-picker
    #imagePicker
    class="h-[250px] w-[250px]"
    [formControl]="imgPicker"
    (error)="onImageError($event)"
  >
    <!-- Customize your upload button -->
    <ng-template #uploadBtn>
      <button
        class="w-36 h-14 flex justify-center items-center gap-3 rounded-lg bg-blue-400 hover:bg-blue-600 text-white"
        (click)="imagePicker.onSelectImg()"
      >
        Upload image
      </button>
    </ng-template>

    <!-- Customize your selected image -->
    <ng-template #image let-img>
      <img
        class="h-[120px] w-[120px] bg-cover bg-center rounded-full"
        [src]="img"
      />
    </ng-template>

    <!-- Customize your Actions -->
    <ng-template #actions>
      <div
        class="flex justify-center items-center border-t-2 border-slate-100 divide-x text-base text-gray-400"
      >
        <a
          class="w-1/2 flex flex-auto items-center justify-center py-4 px-2 hover:bg-hover hover:bg-slate-100 cursor-pointer delete-btn text-red-500"
          (click)="imagePicker.onResetImage()"
        >
          <mat-icon class="h-4 w-4 font-medium text-center align-middle"
            >delete</mat-icon
          >

          <span class="edit-text">Delete</span>
        </a>

        <a
          class="w-1/2 flex flex-auto items-center justify-center p-4 hover:bg-hover hover:bg-slate-100 cursor-pointer edit-btn"
          (click)="imagePicker.onSelectImg()"
        >
          <mat-icon class="h-4 w-4 font-medium text-center align-middle"
            >add_photo_alternate</mat-icon
          >

          <span class="edit-text">Edit</span>
        </a>

        <a
          class="w-1/2 flex flex-auto items-center justify-center p-4 hover:bg-hover hover:bg-slate-100 cursor-pointer edit-btn"
          (click)="imagePicker.onDownloadImg()"
        >
          <mat-icon class="h-4 w-4 font-medium text-center align-middle"
            >cloud_download</mat-icon
          >
        </a>
      </div>
    </ng-template>
  </image-picker>

Accessablity

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | formControlName | formControlName | Form contol in inside form group. | | formControl | formControl | Single form control. | | ngModel | ngModel | Two way binding | | Input() sizeLimit | number | Maximum file size (KB), by default 5120000 KB. | | Input() showActions | boolean | Display actions buttons. | | Input() showEditBtn | boolean | Display edit button. | | Input() showDeleteBtn | boolean | Display delete button. | | Input() showDownload | boolean | Display download button. | | Input() editText | string | Edit button label. | | Input() deleteText | string | Delete button label. | | Input() editIcon | string | Edit button icon (img-path). | | Input() deleteIcon | string | Delete button icon (img-path). | | Input() downloadIcon | string | Download button icon (img-path). | | Output() error | EventEmitter<ImagePickerError> | On error occurred. |

Demo

Link https://stackblitz.com/edit/stackblitz-starters-vhdzsf.

Support

Made with love ❤️, For support, email [email protected].