ngx-spa-utilities v14.4.0

This library was generated with Angular CLI version 14.0.0.

Installation

Install ngx-spa-utilities from npm:

npm install bootstrap notiflix ngx-spa-utilities

Install ngx-spa-utilities from yarn:

yarn add bootstrap notiflix ngx-spa-utilities

Destroy Service

@Component({
  ...
  providers: [DestroyService]
})
export class ProductComponent implements OnInit {
  
  constructor(
    private cartService: CartService,
    private destroy: DestroyService) { }

  ngOnInit(): void {
    this.cartService.getCart()
      .pipe(takeUntil(this.destroy.destroyed$))
      .subscribe({...});
  }
}

Notiflix Service

@Component({
  ...
})
export class AppComponent implements OnInit {
  
  constructor(private notiflixService: NgxNotiflixService) { }

  ngOnInit(): void {
    this.notiflixService.init({
      // Custom OK button
      okButton: 'Okie', 

      // Custom Cancel button
      cancelButton: 'Oh No',

      // Custom loading svg
      loadingSvgUrl: 'assets/img/loading.svg',

      // Custom loading style
      loadingType: 'custom',

      // Custom loading color
      loadingColor: '#ff5549',

      // Custom font-family
      fontFamily: 'Roboto'
    });

    // Fire to show a success notification
    this.notiflixService.success('Hello, World.');
  }

All Functions

// Init
init(): void

// Notify
notifySuccess(): void
notifyError(): void
notifyWarning(): void
notifyInfo(): void

// Confirm
confirmSuccess(): void
confirmError(): void
confirmWarning(): void
confirmInfo(): void

// Ask
askSuccess(): void
askError(): void
askWarning(): void
askInfo(): void

// Promt
promptSuccess(): void
promptError(): void
promptWarning(): void
promptInfo(): void

// Report
reportSuccess(): void
reportError(): void
reportInfo(): void
reportWarning(): void

// Loading
showLoading(): void
hideLoading(): void

// Block
showBlock(): void
hideBlock(): void

Interfaces

export interface NotiflixCustom {
  okButton?: string;
  cancelButton?: string;
  loadingSvgUrl?: string;
  loadingType?: 'standard' | 'hourglass' | 'circle' | 'arrows' | 'dots' | 'pulse' | 'custom';
  loadingColor?: string;
  fontFamily?: string;
}

Function Utilitity

@Component({...})
export class ProductComponent implements OnInit {
  id: string = '';

  constructor(private fu: FunctionUtility) { }

  ngOnInit(): void {
    this.id = this.fu.nextID();
  }
}

All Functions

today(): string
nextID(): string
toSeq(input: Date): string
toStringDate(input: Date): string
toStringTime(input: Date): string
toStringDateTime(input: Date): string
toStringYearMonth(input: Date): string
toStringShortMonth(input: Date): string
getParentUrl(url: string, backLevel: number = 1): string
toStringLeadingZeros(input: number, targetLength: number): string

toDate(input: string): Date
toUTCDate(input: Date): Date
toEndDate(input: Date): Date
toBeginDate(input: Date): Date
toLastDateOfYear(input: Date): Date
toLastDateOfMonth(input: Date): Date
toFirstDateOfYear(input: Date): Date
toFirstDateOfMonth(input: Date): Date

toParams(formValue: any): HttpParams

toFormData(formValue: any): FormData

calculatePagination(pagination: Pagination): void

Key Value Utility

export interface KeyValueUtility {
  key?: any;
  value?: string;
  value_vi?: string;
  value_en?: string;
  value_zh?: string;
  optional?: any;
}

Operation Result

export interface OperationResult {
  error?: string;
  isSuccess?: boolean;
  data?: any;
}

Pagination Utility

export interface Pagination {
  totalCount: number;
  totalPage: number;
  pageNumber: number;
  pageSize: number;
  skip: number;
  isPaging: boolean;
}

export interface PaginationParam {
  pageNumber: number;
  pageSize: number;
  isPaging: boolean;
}

export class PaginationResult<T> {
  result: T[] = [];
  pagination: Pagination = <Pagination>{};
}

Media Uploader

Installation

In angular.json:

{
  ...
  "architect": {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets",
          {
            "glob": "**/*",
            "input": "node_modules/ngx-spa-utilities/assets",
            "output": "assets"
          }
        ],
        "styles": [
          "node_modules/bootstrap/scss/bootstrap.scss",
          "node_modules/notiflix/dist/notiflix-3.2.5.min.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
          "node_modules/notiflix/dist/notiflix-3.2.5.min.js"
        ]
      }
    }
  }
  ...
}

In *.module.ts:

import { MediaUploaderComponent } from 'ngx-spa-utilities';

@NgModule({
  imports: [
    ...
    MediaUploaderComponent,
    ...
  ]
})

In *.component.html:

<media-uploader
  #mediaUploader
  [src]="modal.src"
  [height]="10"
  [maxSize]="50000"
  [copy]="true"
  [crop]="true"
  [remove]="true"
  [preview]="true"
  [disabled]="false"
  [confirmRemove]="true"
  [accept]="'.jpg, .jpeg, .png, .svg'"
  [(file)]="modal.file"
  (result)="handleResult($event)">
</media-uploader>

In *.component.ts:

@Component({...})
export class AppComponent {
  @ViewChild('mediaUploader') mediaUploader!: MediaUploaderComponent;
  model: Model = <Model>{};

  handleResult(event: OperationResult): void {
    // Do something here...
  }

  reset(): void {
    // Reset uploader
    this.mediaUploader.reset();

    // Do something here...
  }
}

interface Model {
  src: string;
  file: File;
}