In angular 8 data input data binding is not working?

Question

This question is asked multiple times before and I satisfied with the all the solutions provided. But I am stuck in the basic problem, ie. how to get the data from the parent component to the child component. Don't know what I am doing wrong here!!!

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  message: string = "Hello World!";

  constructor() {
    //
  }

  ngOnInit() {
    //
  }
}

app.component.html

<div class="app">
    <div class="menu">
        <app-menu></app-menu>
    </div>

    <div class="body">
        <div class="container">
            <router-outlet></router-outlet>
        </div>
    </div>

    <footer>
        <app-footer></app-footer>
    </footer>
</div>

footer.component.ts

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})

export class FooterComponent implements OnInit {

  @Input() message: string;

  constructor() {}

  ngOnInit() {
    console.log(this.message);
  }

}

The ngOnInit() function call on the footer.component.ts always returns undefined

Answer 1

You haven't bound the app-root's message to the child component. Templates are isolated from each other and doesn't inherit any attributes from the parent that renders them. Instead, you must pass data to the templates using data-binding.

Try this:

<footer>
    <app-footer [message]="message"></app-footer>
</footer>

Please see Template Syntax