Learn the steps to refresh a component in Angular 5

Question

Learn the steps to refresh a component in Angular 5

src/shared.service.ts

    public _testData:any;

      set testData(value:any) {
        this._testData = value
      }

      get testData():any {
        return this._testData;
      }

src/header.component.ts

 private postValues() {
    this._PartService.PostDataValues(this.search).subscribe(
      result => {
         this.sharedService._testData
        })
  }

  onSearch() {
       this.postValues()
   }

src/home.component.ts

private downloadRecentSearches() {
   this.recentSearchService.download().subscribe(
    searches => {
      this.resultData = searches;
      this.originalSearches = this.resultData.data;
      this.sharedService._testData = this.originalSearches
      this.onSelectItem()
    })
  }

The code snippet above involves assigning the result to "this.sharedService._testData". In the header component, upon clicking search, the new search result is saved and needs to be updated in the home component. However, there is uncertainty regarding how to navigate back to the home component to retrieve the latest search results.

angular typescript angular5

Answer 1

Answer №1

Utilizing angular's EventEmitter can facilitate component communication. Upon triggering the onsearch event, you have the ability to dispatch an event to other components along with the user-inputted value stored in this.search. Subsequently, within your home component.ts file, you can listen for the emitted event and validate whether it returns any data (such as the search query). If a valid value is returned, you can invoke the downloadRecentSearches() function and pass in the retrieved value.

To delve deeper into component interaction within Angular, refer to the documentation available here.

For example:

shared.service.ts

import { Output, EventEmitter } from '@angular/core';

@Output() search: EventEmitter<string> = new EventEmitter();

searchChanged(value) {
   this.search.emit(value);
}

search.component.ts

import { HostListener } from '@angular/core';

@HostListener('change')
onSearch() {
   this.sharedService.searchChanged(this.search)
}

home.component.ts

constructor() {
  this.eventListener();
}

eventListener() {
   this.sharedService.search.subscribe((searchValue) => {
       console.log(searchValue) // value of the inputted by user
       // do your logic here
   })
}

Answer 2

Utilizing angular's EventEmitter can facilitate component communication. Upon triggering the onsearch event, you have the ability to dispatch an event to other components along with the user-inputted value stored in this.search. Subsequently, within your home component.ts file, you can listen for the emitted event and validate whether it returns any data (such as the search query). If a valid value is returned, you can invoke the downloadRecentSearches() function and pass in the retrieved value.

To delve deeper into component interaction within Angular, refer to the documentation available here.

For example:

shared.service.ts

import { Output, EventEmitter } from '@angular/core';

@Output() search: EventEmitter<string> = new EventEmitter();

searchChanged(value) {
   this.search.emit(value);
}

search.component.ts

import { HostListener } from '@angular/core';

@HostListener('change')
onSearch() {
   this.sharedService.searchChanged(this.search)
}

home.component.ts

constructor() {
  this.eventListener();
}

eventListener() {
   this.sharedService.search.subscribe((searchValue) => {
       console.log(searchValue) // value of the inputted by user
       // do your logic here
   })
}

Learn the steps to refresh a component in Angular 5

Answer №1

Similar questions

Can TypeScript support passing named rest arguments within the type declaration?

Accessing and sending only the body part of an HTTP response in Angular 7 test cases: A comprehensive guide

Using TypeScript, pass an image as a prop in a Styled Component

NPM packages: Providing a comprehensive assets and images delivery solution package

Steps to deactivate an angular material component on version 2.0.0-beta.5

typescript loop with a callback function executed at the conclusion

Is there a way to showcase the data of each table row within the tr tag in an Angular 8 application?

Using multiple flatMap responses within the map operator across various functions: a guide

Is it necessary for me to set up @types/node? It appears that VSCode comes with it pre-installed

Avoiding Re-renders in an Angular2 Countdown Component

Please ensure that the table contains all the records corresponding to the respective days

Error: Reference to an undeclared variable cannot be accessed. TypeScript, Cordova, iOS platforms

Error encountered while implementing onMutate function in React Query for Optimistic Updates

Ensuring the safety of generic types in Typescript

Distinguishing Between TypeScript Interface Function Properties

Access the properties of the encapsulated component in Vue 3, allowing for IDE autocomplete support

The color attribute for the ion-button element is not functioning properly on Android devices in

Manage scss styles consistently across Angular projects with this Angular library designed to

Error: Null is causing an issue and preventing property 'isSkipSelf' from being read in Angular7

Is there a sweet TypeScript class constructor that can take in its own instance as an argument?