Toast notification displays "undefined" when subtitle and caption are not provided

[davidgalvis-sicpa]

Description

When creating a Toast notification with only title and type properties set, the component renders the literal text "undefined" for the subtitle and caption fields instead of hiding those elements.

Steps to reproduce

1. Create a toast notification with only title and type:

this.notificationService.showToast({
  type: 'info',
  title: 'My notification'
});

2. Observe that the toast displays:
   My notification
   undefined
   undefined

Expected behavior

When subtitle and caption are not provided (or are empty strings), the toast should only display the title without rendering empty elements or "undefined" text.

Root cause

In toast.component.ts, the template always renders the subtitle and caption elements when no custom template is provided:

The *ngIf only checks for the absence of a custom template, but does not check if subtitle or caption actually have values.

Proposed fix

1. Update toast.component.ts template

Add truthy checks for subtitle and caption in the *ngIf conditions:

  <div *ngIf="!notificationObj.template && notificationObj.subtitle" ibmToastSubtitle>
      <span [innerText]="notificationObj.subtitle"></span>
  </div>
  <p *ngIf="!notificationObj.template && notificationObj.caption" ibmToastCaption [innerText]="notificationObj.caption"></p>

2. Update notification-content.interface.ts (optional)

Make subtitle and caption optional to better reflect their actual usage:

  export interface ToastContent extends NotificationContent {
      subtitle?: string;
      caption?: string;
  }

Environment

• Package: carbon-components-angular
• File: src/notification/toast.component.ts