How to update Html table in child component when I click the button from parent component in Angular 4?

Question

I need to update Html table in child component when I click the button from parent component in Angular 4.

My Parent component click event is below

Resetcount() {
  if (this.step == "child") {
    this.airportmgt.GetAllUserList();
  }
}

My Child component

GetAllUserList() {
  this.auth.Get(myurl).then((user) => {
      let organisationDTOS = user.json();
      this.Users = organisationDTOS.Users;
      console.log(JSON.stringify(this.Users);
      }).catch((e) => {
      `enter code here`
      this.toast.error(this.commethod.getErrorcodeStatus(e));
    })
  }
}

Note here I am using Users array in Html iteration.

Your question lacks important implementation details. Please add that. Also, what exactly are you trying to implement? — SiddAjmera, Oct 13 '18 at 12:40
@Arul Vivek You need to pass data from one component to another component. I guess angular has a three ways for this. use something like behaviour subject through a service to emit data form one component and subscribe in another component. This might be helpful -https://stackoverflow.com/questions/44414226/angular-4-pass-data-between-2-not-related-components — devansvd, Oct 13 '18 at 13:15

score 2 · Answer 1 · answered Oct 13 '18 at 13:00

use @viewchild() concept to access the methods in child component

example: Child component - persondetails.component.ts:

@component({
selector:'person-details'
})
export class PersonDetailComponent {
personDetails:PersonDetails
}

app.component.ts:

import { PersonDetailComponent}  from './persondetail.component';   
@Component({
  selector: "myProject",
  templateUrl: "app.component.html"
})
export class AppComponent { 
  @ViewChild(PersonDetailComponent) personDetail:PersonDetailComponent;
  ngAfterViewInit() {
      this.getChildProperty();
  }
  getChildProperty() {
     console.log(this.personDetail);
  }
}

please refer to documentation https://angular.io/guide/component-interaction#parent-calls-an-viewchild

score 0 · Answer 2 · answered Oct 13 '18 at 14:09

parent-component.html

<button type="button" (click)="Resetcount('child')">Button</button>
<child-component></child-component>

parent-component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { AirportMgtService } from "../services/airport-mgt.service";
import { ChildComponentComponent } from "../child-component/child-component.component";

@Component({
    selector: 'app-parent-component',
    templateUrl: './parent-component.component.html',
    styleUrls: ['./parent-component.component.css']
})
export class ParentComponentComponent implements OnInit {
    @ViewChild (ChildComponentComponent) child: ChildComponentComponent;

    public payload;
    constructor(private airportMgtService: AirportMgtService) {  }

    ngOnInit() {
    }

    Resetcount(type) {
        if (type == "child") {
        this.airportMgtService.GetAllUserList()
            .subscribe( (payload) => {
            this.payload = payload;
            this.child.getData(this.payload);
            });
        }
    }
}

airport-mgt.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AirportMgtService {
    private url = 'https://jsonplaceholder.typicode.com/posts';
    constructor(private http: HttpClient) { }

    GetAllUserList() {
        return this.http.get(this.url);
    }
}

child-component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'child-component',
    templateUrl: './child-component.component.html',
    styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent implements OnInit {
    public jsonData: any;

    constructor() { }

    ngOnInit() {
    }

    getData(data) {
        console.log(data);
    }
}

if you find any difficulties let me know I will provide you jsfiddle link.

Thanks you so much. i got the console data printed in child component new value, but in the html not changed the new value only i saw the existing value. — Arul Vivek, Oct 14 '18 at 10:25
How do i refresh the html table with new value without reloading entire page. — Arul Vivek, Oct 14 '18 at 10:26
Instead of subscribing in parent component , subscribe in child component. — Piyush Jain, Oct 14 '18 at 10:35
still not working, is it possible to refresh the particular div in html — Arul Vivek, Oct 14 '18 at 11:00

How to update Html table in child component when I click the button from parent component in Angular 4?

2 Answers2