Ng-eldeeb-image-picker NPM

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.