Angular communication between parent and child using @Input components doesn't work but gives no errors

I am learning about communication between angular components by following this tutorial:

https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

In my project, I copied the parent component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() {}
}

And the child component:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      Say {{ childMessage }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

In app.component.html, I have added the child component tag:

<app-child></app-child>

This is the result in the browser:

For some reason, it doesn't display the message value.
And there's no error in the console.
I don't understand why this is happening.
If you see why, please drop a comment. Thank you!