Nested Component binding empty

Question

I am trying to understand property binding and it has been very confusing, I was able to solve my console full of errors, but I cannot figure out why my binding
app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
        <app-game-control [childTitle]="parentSelector"></app-game-control>
      </div>
</div>

app.component.ts

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

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

  parentSelector = "This shall pass from parent to child" ;

}

game-control.component.html

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

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
@Input() childTitle:string ;
title= "Hello from child component";

  ngOnInit() {
  }
}

game-control.component.html

<div class="row">
    <div class="col-xs-12">
      {{title}}
  </div>
</div>

What I am doing wrong?

Your passed in parameter name is childTitle. You are using the property title. Instead you should be using the input property in your game-control.component.html {{childTitle}} — LLai
– LLai, Commented Dec 9, 2017 at 0:24
@Nofel In your game-control.component.html you define your input property childTitle. To use the input parameter in game-control.component you have to use the name of that parameter so this.childTitle in your typescript or childTitle in your template html. title in game-control.component is a totally different property. — LLai
– LLai, Commented Dec 9, 2017 at 0:40
ngOnChanges has to be implemented in this component to have the value GameControlComponent — Aravind
– Aravind, Commented Dec 9, 2017 at 0:47
@Aravind ngOnChanges is there just bcoz I had used cli to create the component — localhost
– localhost, Commented Dec 9, 2017 at 0:48

Jean-Marc Roy · Accepted Answer · 2017-12-09 06:27:20Z

2

All is right in your code, the only thing is that you dont display your "childTitle" input at all. Try this:

game-control.component.html

<div class="column">
    <div>
      <h1>Data from game-control component
      {{title}}
  </div>
  <div>
      <h1>Data from parent</h1>
      {{childTitle}}
  </div>
</div>

answered Dec 9, 2017 at 6:27

Jean-Marc Roy

1,7911 gold badge13 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

localhost Over a year ago

Thanks! So basically u make nested components to assign parent value e.g like sending or setting a variable, from parent to child.? I choose above example to be simplest because I had struggled to learn @Input

Jean-Marc Roy Over a year ago

Yes basically, you will have smart component (parent holding the logic for the data: get data from server, update etc...) and dumb component who don't know anything about your application (Reusable component), data are passed in with Input and event emited via Output. Here is a blog post about this topic: blog.angular-university.io/…

Collectives™ on Stack Overflow

Nested Component binding empty

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related