Using a Directive inside of Kendo Angular Notification's Notification Content Component

Question

I have a Notification Content Component which is factory created when a Kendo Angular Notification is displayed. In this Component's template, a div tag contains a reference to a Directive.

@Directive({
    selector: '[myDirective]'
})
export class MyDirective {
    constructor() {}
}

@Component({
  selector: 'my-component-notification-content',
  template: `
    <div myDirective  > {{text}} </div>
  `,
})
export class MyComponentNotificationContent {
  @Input() public text!: string;

  constructor() {}
}

@Component({
  selector: 'my-component',
  template: `
    <div #notificationArea></div>
  `
})
export class MyComponent {
  @ViewChild("notificationArea", { read: ViewContainerRef, static: false }) 
  public appendTo!: ViewContainerRef;

  constructor(
    private notificationService: NotificationService
  ) {}

  postNotification(style: 'error' | 'success', text: string) {
    let notificationDetails: any = {
      appendTo: this.appendTo,
      content: MyComponentNotificationContent,
      animation: { type: "slide", duration: 400 },
      position: { horizontal: "center", vertical: "top" },
      type: { 
        style: style, 
        icon: false,
      }
    };
  
    notificationDetails['closable'] = true;
  
    let notificationRef = this.notificationService.show(notificationDetails);
    notificationRef.content!.instance.text = text;
  }
}

The notification will show when postNotification() is called, but the Directive's constructor is never called.