ng-eldeeb-image-picker

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 [e-mail].