Ng-neat/hot-toast custom component and passing usual options not working

Question

My project currently use ngneat/hot-toast as our alert message library. It works fine. but now we need to add some custom attributes in to the alert element due to requirement of cypres test automation. So I make a custom service wrap aroung the HotToastService and trying to use it. it works fine.

export class ToastService {
  constructor(private toastService: HotToastService) {}

  public show<DataType>(data: Partial<ToastData>): CreateHotToastRef<DataType | unknown> {
    data = this.clearParams(data, ToastType.SHOW);
    return this.toastService.show<Partial<ToastData>>(CustomToastComponent, data);
  }

  public success<DataType>(data: Partial<ToastData>): CreateHotToastRef<DataType | unknown> {
    data = this.clearParams(data, ToastType.SUCCESS);
    return this.toastService.success<Partial<ToastData>>(CustomToastComponent, { data });
  }

  public error<DataType>(data: Partial<ToastData>): CreateHotToastRef<DataType | unknown> {
    data = this.clearParams(data, ToastType.ERROR);
    return this.toastService.error<Partial<ToastData>>(CustomToastComponent, { data });
  }

  public warning<DataType>(data: Partial<ToastData>): CreateHotToastRef<DataType | unknown> {
    data = this.clearParams(data, ToastType.WARNING);
    return this.toastService.warning<Partial<ToastData>>(CustomToastComponent, data);
  }

  clearParams(data: Partial<ToastData>, type: ToastType): Partial<ToastData> {
    data.type = type;
    data.dataCyPrefix = data.dataCyPrefix ? data.dataCyPrefix : '';
    data.dataCySuffix = data.dataCySuffix ? data.dataCySuffix : '';
    return data;
  }
}

export interface ToastData extends ToastOptions<any> {
  message: string;
  type: ToastType;
  dataCySuffix: string;
  dataCyPrefix: string;
}

export enum ToastType {
  SHOW,
  SUCCESS,
  ERROR,
  WARNING
}

export class CustomToastComponent implements OnInit {
  message: string;
  dataCyPrefix = '';
  dataCySuffix = '';
  type: ToastType;
  constructor(@Optional() @Inject(HotToastRef) public toastRef: HotToastRef<ToastData>) {
    this.message = toastRef.data.message;
    this.dataCyPrefix = toastRef.data.dataCyPrefix;
    this.dataCySuffix = toastRef.data.dataCySuffix;
    this.type = toastRef.data.type;
    console.log(toastRef.data);
  }

  ngOnInit(): void {}
}

template html

<span [attr.data-cy]="dataCyPrefix + (dataCyPrefix ? '-' : '') + 'message-span' + (dataCySuffix ? '-': '') + dataCySuffix">
  {{message}}
</span>

But when I try to pass options, it starts not taking these options properly.

this.toast.success({
      message,
      dataCyPrefix: (this.floor ? this.floor?.id : this.floorForm.value?.name) + '-error-toast',
      autoClose: false,
      dismissible: true
    });

autoClose: false and dismissible: true not working now. other things works fine.

I just want to know what I am trying to do is possible or not?

thanks in advance.

Ng-neat/hot-toast custom component and passing usual options not working

0 Answers0