Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 - How to reload a component after it is initialized

Tags:

reload

angular

I have a search feature in the application. When the user clicks the search button the data is captured in [(ngModel)] and passed to a service. The URL is redirected to the HTML of the SearchComponent. This service is injected into the SearchComponent and the data is displayed.

When the user enters a new search term, I want to refresh the existing SearchComponent. What is the proper way to do this?

search.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from '../service/data.service';

@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

userInput : string; 
constructor(private data : DataService) { }

ngOnInit(){
    this.search();
}

search(){

    this.userInput = this.data.searchData;
    console.log('in search init  ' + this.userInput);
    this.data.searchData = "";
 }
}

app.component.ts

import { Component } from '@angular/core';
import { DataService } from './service/data.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private data : DataService){};
   
  title = 'app';
  searchInput: string;
  
  searchButtonclick(){
    console.log('search button clicked   '  + (this.searchInput));
    this.data.searchData = this.searchInput
    this.searchInput = "";
  }

}

app.component.html

<form>
  <input type="text" placeholder="Search" [(ngModel)]="searchInput" name="inputfield">
  <a routerLink="/search">
    <button (click)="searchButtonclick()">Search</button>
  </a>
</form>
like image 972
user2180794 Avatar asked Mar 06 '18 06:03

user2180794


People also ask

How do you refresh a component from another component in angular 6?

To refresh, or better to say update another component from a different component, we can use the concept of Observables and Subject (which is a kind of Observable). This concept has an added benefit when data are to be received from APIs for CRUD operations.

How do I reload a component in angular 9?

There is button by which i am updating my page data. on button click i have save data in back end and refresh data. So to reload/refresh the component - as per my requirement - is only to refresh the data. if this is also your requirement then use the same code written in constructor of component.

How do I reload a particular component in angular 2?

In your component, import NavigationEnd: import { Router, NavigationEnd } from '@angular/router'; And then subscribe to it in your constructor: constructor(private thingService: ThisThingService, private router: Router) { router.


2 Answers

I would suggest to use search.component.ts as child component and use @Input :

app.component.html

<form>
  <input type="text" placeholder="Search" [(ngModel)]="searchInput" name="inputfield">
  <app-search [userInput]="searchInput"></app-search>
</form>

search.component.ts

@Input() userInput: string;

ngOnChange(){
    // this will be called each time userInput changes
    this.search(); 
}

See this article for more info


If you want that upon click event , all you need is one extra variable something like searchvalue

app.component.html

<form>
  <input type="text" placeholder="Search" [(ngModel)]="searchInput" name="inputfield">
  <button (click)="searchButtonclick()">Search</button>
  <app-search [userInput]="searchvalue"></app-search>
</form>

app.component.ts

searchvalue:string;
searchButtonclick(){
    this.searchvalue = this.searchInput;
}

search.component.ts

// as above
like image 194
Vivek Doshi Avatar answered Oct 19 '22 14:10

Vivek Doshi


Ok the trick is that if the model is updated, the component need not be reloaded. The view is automatically updated.

so I edited my data.service to have an observable as follows and then subscribed to this Observable in the search component.

data.service for sharing the data

import { Injectable } from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

  private localData = new BehaviorSubject<string>("");
  searchData = this.localData.asObservable(); 
  constructor() { }

  updateSearchInput(data : string ){
       this.localData.next(data);
  }
}

search.component

 import { Component, OnInit, Input } from '@angular/core';
 import { DataService } from '../service/data.service';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  userInput : string;
  constructor(private data : DataService) { }

  ngOnInit(){
    this.search();
  }

  search(){    
    this.data.searchData.subscribe((data) => this.userInput = data );  
  }
}
like image 1
user2180794 Avatar answered Oct 19 '22 14:10

user2180794