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:
enter image description here

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!

2 Answers

1
ganesh045 On Best Solutions

Actually you need to call Parent Component to parse your @input to the Child Component. you are directly calling the child selector that is why your not able to displaying anything.

So, call the Parent Component in app.component.html to get input string,

<app-parent></app-parent>
0
Teddy Sterne On

You need to update app.component.html to use the parent component instead of the child component and then it will work correctly. Example

<app-parent />