I would like to send data from the `age` input from `child-information` component to the `age-line`, component which includes a vertical line. This line moves left `'age * 100 pixels'` when it gets the age. 

What's wrong with my code? There are no error messages.

Child-inf.html:

```
 <button id="okButton" (click)=addAge()>OK</button>
 Age : <input 
 type="text" name="Age" value="Kor" id="ageId" onfocus="this.value = 
 this.value=='Kor'?'':this.value;" onblur="this.value = 
 this.value==''?'Kor':this.value;">

```

Child-inf.ts: 

```
export class ChildInformationsComponent implements OnInit {
 age:number = 1;
  @Output() buttonClicked: EventEmitter<number> = new EventEmitter<number>();
  constructor(private el: ElementRef) { }

  ngOnInit() { }

  addAge(){
    this.age =parseInt((<HTMLInputElement>document.getElementById('ageId')).value);
    this.buttonClicked.emit(this.age); 
  }
}

```

Age line html:

```
 <div class="age-line" [style.left.px]="age * 100"> <div class="line"></div> </div>

```

Age line ts:

```
export class AgeLineComponent implements OnInit {

 constructor() { }
 age: number= 1;

 showNextComponent(emittedAge: number) {
   this.age = emittedAge;
   console.log('Button clicked');
 }

 ngOnInit() { }

}

```