Strange behavior for an angular 16 component?

I have this component made in angular 16. It is supposed to display a red div with a message in it.

import {
} from "@angular/core";
import { MaintenanceMessage } from "@shared/models/maintenance";

  selector: "app-maintenance-footer",
  template: `
    <div class="bg-red-600 p-3 text-4xl text-white text-center">
      {{ maintenanceMessage.Message ?? "No message" | translate }}
    {{ maintenanceMessage | json }}
  styles: [],
export class MaintenanceFooterComponent {
  @Input() maintenanceMessage: MaintenanceMessage;

This is how it gets called:

   <ng-container *ngIf="maintenanceMessage()">

**IMPORTANT: maintenanceMessage is a SIGNAL

So i am expecting a normal output, if maintenance message is present, print it out in the div. But instead I am able to see the output for

{{ maintenanceMessage | json }}


{{ maintenanceMessage.Message ?? "No message" | translate }}

defaults to No Message, even if Message is a valid string

  • Are you sure maintenanceMessage has Message (with the capital M) as key ?


  • yes, it sadly comes from the backend as such


  • Maybe maintenanceMessage?.Message. Or better, pass in the signal because it migjt be empty at the time your setting your input?


Leave a Comment