Not able to pass values from Parent to child in Angular

I am trying to write a very simple program of passing value from parent to child component. In the below code, I am trying to print firstName(John) but as shown in the screenshot, it's not getting printed.

app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { firstName = "John"; } 

app.component.html

<app-cards> [firstName]="firstName" </app-cards> 

card.component.ts

 import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-cards', templateUrl: './cards.component.html', styleUrls: ['./cards.component.css'] }) export class CardsComponent implements OnInit { @Input() firstName : string | undefined; constructor() { } ngOnInit(): void { } } 

card.component.html

<div> First Name: {{ firstName }} </div> 

Output :