CODEWITHSUNDEEP
angular
localhost
localhost

Reputation: 871

Nested Component binding empty

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?

Upvotes: 0

Views: 58

Answers (1)

Jean-Marc Roy
Jean-Marc Roy

Reputation: 1791

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>

Upvotes: 2

Related Questions