How to Pass Data from from Parent to Child in Angular

When I try to pass data from parent to child component. I'm getting an undefined message in the console. Here my message is just a string.

1. child.component.ts - >[ upload-doc.component.ts ]

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

@Component({
selector: 'app-upload-doc',
template: `
Say {{ message}}
`,
templateUrl: './upload-doc.component.html',
styleUrls: ['./upload-doc.component.css']
})
export class UploadDocComponent implements OnInit {



@Input() message: string;
constructor() { }

ngOnInit(): void {
console.log("Child Component " + this.message); // printing on console

}

}

1. parent.component.ts - > [ register-page.component.ts ]

@Component({

selector: 'app-register-page',

templateUrl: './register-page.component.html',
template: `<app-upload-doc [message]="message"> </app-upload-doc>`,
styleUrls: ['./register-page.component.css']
})

export class RegisterPageComponent implements OnInit {


constructor() { }
message = "message from parent"

ngOnInit(){ }

}




It's giving me the output as Child Component undefined. How to get rid of this undefined thing.

Continue reading...