How to update child component without reloading the whole site

Question

I am facing a problem with updating a child component without reloading the whole site.

the structure parent component is:

parent component:


  
    
  
  
    
      {{ "COMPANY_OVERVIEW.TITLE" | translate}}
      
        
        
          
        
      
    
    
      {{ "FEEDS.TITLE" | translate}}

the feeds component :



  
    
      
        {{ 'FEEDS.SUBTITLE' | translate}} {{vin}}

in this component,there is a input field and a button. if the button is clicked, it will call the post api service. to send the data to Backend.

public sendComment(): void {
    alert(this.feedsComment);
    let newFeeds = this.createFeeds();
    this.feedsService.sendFeedsComment(newFeeds).subscribe(() => {
      this.feedsService.getFeedsOverview(this.vin).subscribe((feedsData: Feeds[]) => {
        this.feedsOverviewData = feedsData;
      });
    });
  }

feeds-list.html:


  
      
    
        
          
            insert_emoticon
          
          
              
                n-Level {{item.user}}
              
              
                Event
              
            
          
          {{item.date | date: 'dd/MM/yyyy'}}
        
        
          
            {{item.comment}}
          
          
            FIN search executed by {{item.user}}.

and feeds-list.ts

export class FeedListComponent implements OnInit {
  displayedColumns: string[] = ['feeds'];
  @Input() feedsOverviewData: Feeds[];
  @ViewChild(MatPaginator) paginator: MatPaginator;
  dataSource = new MatTableDataSource(DATA);
  constructor() {
  }

I this feeds component, it has also a child component feed-list component

my qustion is, if the call sendFeedsComment returns 200 back, it should this new comments be shown in the feed-list without uploading the whole site.

I have a idea, I can call the api getAllFeeds to get all comments, but this api will be used in the parent component.

what is the right way to implement

can somebody help me?

Best Regards,

Leo

Yash Rami · Accepted Answer

All you need is ngOnChanges on feeds-list.ts, ngOnchanges trigger when ever the input param value is change so in your case your input param is feedsOverviewData. here is the example. i hope it helps you out

feeds.html

   
     
      
         
            {{ 'FEEDS.SUBTITLE' | translate}} {{vin}}

feeds.ts

   public sendComment(): void {
      alert(this.feedsComment);
    let newFeeds = this.createFeeds();
    this.feedsService.sendFeedsComment(newFeeds).subscribe(() => {
       this.feedsService.getFeedsOverview(this.vin).subscribe((feedsData: Feeds[]) => 
     {
       this.feedsOverviewData = feedsData;
     });
    });
  }

feeds-list.ts

   import { OnChanges, SimpleChanges } from '@angular/core';

   export class FeedListComponent implements OnInit, OnChanges {
   displayedColumns: string[] = ['feeds'];
   @Input() feedsOverviewData: Feeds[];
   @ViewChild(MatPaginator) paginator: MatPaginator;
   dataSource = new MatTableDataSource(DATA);

   constructor() {
   }

    ngOnChanges(changes: SimpleChanges): void {
    if (changes != null) {
         console.log(changes);
            // here you will get the updated data when ever you click the sendComment button on feeds 
     }
    }

How to update child component without reloading the whole site

Answers (1)

Related Questions