-1

My Page structure is:

<app-header></app-header>
<personal-information></personal-information>
<address></address>  // multiple address for loop
<app-footer></app-footer>

I have single JSON having personal information and multiple addresses with common field 'name' in it.

How can I update/refresh the all address component, on changing one component 'name'field, without refreshing the whole page?

Raj N
  • 249
  • 1
  • 18

1 Answers1

0

You can achieve it using two-way data binding in angular. As the values change of two-way property, it will update the value of the respective template of the component in the DOM.

demo.component.html
       <app-header [name]="model.name"></app-header>
       <personal-information ></personal-information>
       <address [name]="model.name"></address>  // multiple address for loop
       <app-footer [name]="model.name"></app-footer>

demo.component.ts

       demoFn(){
           model.name="Joe"
       }

The name value 'Joe' will be passed to all the component, you have to accept the attribute name in all the component using @Input().

personal-information.component.ts

          @Input() name:string;

personal-information.component.html 

        <input [(ngModel)]="name" />

Now, as will change the value in the personal-information component, it will pass it into all the component, and it will be updated in DOM if it is being used.

Bharat Choudhary
  • 186
  • 5
  • i have 'name' field in address component itself, on changing one address how can i update all other addresses. – Raj N Apr 08 '19 at 13:19
  • Do we need to update all the addresses component name input on changing of any single name input in the address component? – Bharat Choudhary Apr 08 '19 at 13:34