How to refresh a component from another component with out reloading the entire page using Angular4

Question

I'm using an angular 4 application.
Here I have two components, one is for add functionality and another one is for view functionality. I need to refresh the content in view page whenever i added a new item. The thing i'm doing here is calling the function present in view page at the time of adding a new item.

Here the function is calling and i'm getting the new data source for view page. But the problem here is, the view page Html is not updating. It doesn't showing the new item in the list even i updated the data source.

Any Help ?

Thanks!

** This is an add request component ts**

`import { Component, OnInit } from '@angular/core';
import { GlobalService } from '../../shared/services/global.service';
import{RequestHistoryComponent}from'./pages/request-history/requesthistory.component';
@Component({
  selector: 'app-create-request-popup',
  templateUrl: './create-request-popup.component.html',
  styleUrls: ['./create-request-popup.component.scss'],
  providers:[RequestHistoryComponent]
})
export class CreateRequestComponent implements OnInit {
  constructor(private _globalService:GlobalService,private ReqHisComp:RequestHistoryComponent) {
    this.AddServiceReq();
  }
  ngOnInit(){}
  RequsetOBJ=[];
  AddServiceReq(){
   this._globalService.postApi("ServiceRequest",this.RequsetOBJ).subscribe(response=>{ 
       console.log(response);
       if(response.Status=="OK"){
        ** // This is the function in another compontent **
        this.ReqHisComp.GetallServicerequests();
       }
   },err=>{
      console.log(err);
    });
  }
}`

This is view requests component ts

`import { Component, OnInit } from '@angular/core';
import { GlobalService } from '../../shared/services/global.service';
@Component({
  selector: 'app-request-history',
  templateUrl: './request-history.component.html',
  styleUrls: ['./request-history.component.scss']
})
export class RequestHistoryComponent implements OnInit {
  constructor(private _globalService:GlobalService) {
    this.GetallServicerequests();
  }
  ngOnInit(){}
  MainReqData: any = undefined;
  GetallServicerequests() {
    this.MainReqData=undefined;
    console.log(this.MainReqData);
    this._globalService.getApi("RequestList?CustomerMasterId=" + this.CustomerMasterId + "&AgentMasterId=" + this.AgentMasterId + "&ServiceProviderMasterId=" + this.ServiceProviderMasterId + "&ServiceRequestStatusId=null&ServicePlanId=null").subscribe(response => {
      console.log("GetAllRequest", response);
      if (response.length > 0 && response != undefined) {
        this.MainReqData=response;
      }else{
        this.MainReqData=[];  
      }
    },err=>{
      console.log(err);
    })
  }
}`

have you checked in console whether the updated variable is present in the component controller part ?? — Mukundhan, Dec 17 '19 at 06:46
add some code please, otherwise we can't reach you out correctly, by the way, check if your child component ngOnChanges triggers when the data passed changes — Pedro Bezanilla, Dec 17 '19 at 11:40
Yes i'm getting the updated variable in console, But UI is not updating untill i refresh the page.. — madhubabu Gopisetti, Dec 18 '19 at 04:24

score 0 · Answer 1 · answered Dec 17 '19 at 07:00

there are (as always) multiple approachs.

You could move the business functionality (loading the data and making it available) into a service. Then your smart component would trigger the loading, while the "dumb" component (the view component) would just subscribe to an observable that emits the values whenever they change.
This allows a nicely cut application that follows seperation of concerns.

Another approach would be to provide the data as an input (using the @Input() decorator) into the child (view) component. And there implement the OnChanges- Interface (the ngOnChanges method). It will be executed whenever a input changes. Be aware, if you have deep objects / arrays, it may be that the change detection of angular won´t realize a change. Then it helps to provide the input with a new reference (objects and arrays copied by reference, while booleans, strings, etc are copied by value).

score 0 · Answer 2 · answered Dec 18 '19 at 09:49

0

Thank you all for responding. I made a small mistake in Ts and i fixed that. My problem is solved .

Issue is with the Provider .

answered Dec 18 '19 at 09:49

madhubabu Gopisetti

15
4

How to refresh a component from another component with out reloading the entire page using Angular4

2 Answers2