Why @Input() in angular 4 behaving like two way data binding not one-way?

Question

According to my knowledge input is one way communication. Any changes made to the @Input() variable inside the child will not be reflected in the parent component.

I have a empty array in app component. App component have two child components. One is form component(to add new entries) and second is list component(to show all entries). That empty array is passed to form comp with the help of Input. But change in Input() array inside form component also reflects in root component. And list component gets updated. Here is the code:

app.component.ts

@Component({
selector: 'app-root',
template: `<div>
  <app-form [formElements]="serverElements"> </app-form>         
  <app-list *ngFor = "let server of serverElements" [listServer]="server">
  <app-list> 
</div>`
})
export class AppComponent {
  serverElements = [];
}

app-form.component.html

<div class="row">
    <div class="col-xs-12">
      <p>Add new Servers or blueprints!</p>
      <label>Server Name</label>
      <input type="text" class="form-control" [(ngModel)]="newServerName">
      <label>Server Content</label>
      <input type="text" class="form-control" [(ngModel)]="newServerContent">
      <br>
      <button
        class="btn btn-primary"
        (click)="onAdd()">Add Server</button>
    </div>
</div>

app-form.component.ts

export class FormComponent  {

 @Input() Elements=[];
 newServerName = '';
 newServerContent = '';
 constructor() { }

  onAdd() {
    this.Elements.push({
      name: this.newServerName,
      content: this.newServerContent
    });  
  }
}

app-list.component.ts
@Component({
  selector: 'app-server-element',
  template: ` <div class="panel-heading">{{ server.name }}</div>
                 <div class="panel-body">
                   <p>{{server.content}}</p>
                 </div>`,

})
export class ListComponent implements  {

 @Input() server;
  constructor() { }

}

If you think I misinterpreted your question leave a comment and I remove the duplication. — Günter Zöchbauer
Yup you misinterpreted. your suggested question is about [(ngModel)] and changes. are not reflected to view instead of using two way data binding. In my case i am using @input and changes relflects to parent component also — Aamir
@GünterZöchbauer this is not really a dupe. The problem is not that two-way binding isn't working, but rather the problem of object mutability, i.e why there is "two-way binding" :) — AT82
Through the input variable you pass a reference to the original array (a pointer to its starting position in memory). The form component receives this reference to the array and adds elements to it, so its only natural that other components with references to the same array can see the changes. — Jota.Toledo

Carlos Luis Rivero Carlos Luis Rivero · Accepted Answer · 2020-06-22T12:52:56

I solved it this way, but it only remains to do more tests and study more for me.

Angular V.9.1.0

export class AppComponent implements OnInit {
  @Input() public api: ApiModule;  //ApiModule is a interface.
  @Input() public titulo = '';

  constructor(private router: Router, private dataService: DataService) {
  }

  ngOnInit() {
    setTimeout(() => {
      this.dataService.apiModule = this.api;
    });
  }
}

Why @Input() in angular 4 behaving like two way data binding not one-way?

1 Answers