将 arguments 传递给自定义的 Kendo UI 通知组件

Question

I'm working off this example here: https://www.telerik.com/kendo-angular-ui/components/notification/content/

In the code below, in the show() function, I'd like to pass a data to the CustomComponent. Is this possible to do?

import { Component, Output, Input, EventEmitter } from '@angular/core';
import { NotificationService, NotificationRef } from '@progress/kendo-angular-notification';


@Component({
    selector: 'custom-component',
    template: `
      <span>{{ message }}</span>
      <button class="k-button k-outline" (click)="ignoreNotification($event)">IGNORE</button>
    `
  })

export class CustomComponent {
    @Input() customData; // <--- DATA FROM PARENT. MY CODE
    @Output() public ignore: EventEmitter<any> = new EventEmitter();

    public message = 'Weather: Chance of rain today. There is a 40 percent chance of rain, mainly before 1 p.m.';

    public ignoreNotification(event: Event): void {
        event.preventDefault();
        this.ignore.emit();
    }

    // I'd like to obtain the data here when I go to use it.
    private myFunc() {
       const getsData = this.customData;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <p>Show Custom Component rendered into warning type Notification</p>
        <button class="k-button" (click)="show()">Show</button>
    `
})
export class AppComponent {
    constructor(private notificationService: NotificationService) {}

    public show(): void {
        const notificationRef: NotificationRef = this.notificationService.show({
            content: CustomComponent,
            animation: { type: 'slide', duration: 200 },
            position: { horizontal: 'right', vertical: 'top' },
            type: { style: 'warning', icon: false },
            closable: false
        });

        if (notificationRef) {
            notificationRef.content.ignore
                .subscribe(() => notificationRef.hide());
        }
    }
}

Answer 1

Instead of using Input, just create public property and set it using content.

Example with message property

Inside injected component:

 public message: string;

Set using content on notificationRef:

 if (notificationRef) {
  const notificationContent = notificationRef.content as any;
  notificationContent.message = 'test';
}