2

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() { }

}
Wesley Coetzee
  • 4,768
  • 3
  • 27
  • 45
Aamir
  • 101
  • 1
  • 12
  • If you think I misinterpreted your question leave a comment and I remove the duplication. – Günter Zöchbauer Jul 25 '17 at 10:46
  • 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 Jul 25 '17 at 10:51
  • 3
    @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 Jul 25 '17 at 10:51
  • related: https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language – Jota.Toledo Jul 25 '17 at 11:10
  • 2
    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 Jul 25 '17 at 11:15
  • Correct me if i am wrong. So primittive values are passed by values. Arrays and objects are passed by reference. Right? – Aamir Jul 25 '17 at 11:18
  • Yes, you are right – Jota.Toledo Jul 25 '17 at 11:28
  • Im not sure if I should put my comment as an answer or not, as I can easily imagine other peps bumping to similar issues in the future, but this is programming 101 in my opinion. Ill let you decide, op – Jota.Toledo Jul 25 '17 at 11:30

1 Answers1

0

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;
    });
  }
}
Carlos Luis Rivero
  • 147
  • 1
  • 6