Strange behavior for an angular 16 component?

by

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

import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit,
} from "@angular/core";
import { MaintenanceMessage } from "@shared/models/maintenance";

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

This is how it gets called:

   <ng-container *ngIf="maintenanceMessage()">
      <app-maintenance-footer
        [maintenanceMessage]="maintenanceMessage()"
      ></app-maintenance-footer>
    </ng-container>

**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 }}

but

{{ 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