Joseph Joseph - 2 months ago 57
Javascript Question

Can't Bind Property in Angular 4

Why is there a problem in binding a property on the same component? I already added Input() but still doesn't work. Do i need to put Input() even though it is on the same component when binding?

//output.component.ts
import { Component, OnInit} from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-output',
templateUrl: './output.component.html',
styleUrls: ['./output.component.css']
})
export class OutputComponent implements OnInit {
data: {name: string};
datas = [];

constructor(private dataService: DataService) { }

ngOnInit(){
this.datas = this.dataService.datas;
}
}



//output.component.html
<p *ngFor="let data of datas"></p>
<p>{{data.name}}</p>


//data.service.ts
export class DataService {
datas= [];

addData(name: string){
return this.datas.push({name: name});
}
}

Answer Source

For same component @input API is not required. It is used when you want to pass the data from Parentcomponent to a child component.

//output.component.html
<p *ngFor="let data of dataService.datas" >  // removed [data]="data" and added dataService.datas
   <p>{{data?.name}}</p>
</p>                                         //changed the position of </p>


export class OutputComponent implements OnInit {
   constructor(private dataService: DataService) {}
}

export class DataService {
   datas= [];

   addData(name: string){
      return this.datas.push({name: name});   //return keyword was missing
   } 
}

Just for your reference

DEMO: https://plnkr.co/edit/XlJM2LHFwlAYpQe2ancM?p=preview