CODEWITHSUNDEEP
angular
Ahmed Ghrib
Ahmed Ghrib

Reputation: 757

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:
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!

Upvotes: 0

Views: 100

Answers (2)

Ganesh
Ganesh

Reputation: 6016

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>

Upvotes: 1

Teddy Sterne
Teddy Sterne

Reputation: 14201

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 />

Upvotes: 0

Related Questions