Including one component function to another causing NullInjector error

Question

I am new in angular and trying to figure out one issue which is causing me NullInjector error.

I have a nav-bar component which include a search field. The search filed is giving response based on API GET call. I am able to pass the result from nav-bar component to another(home/landing screen) using @input @output annotation.

So in if condition in function I want to call a function(which include another API call) from home component to navbar component. When I am including the component and function in another component , I am getting null injector error and I am not able to navigating from home component to some other component.

In nav-bar I did :

@Output() public found = new EventEmitter<any>();
  constructor(private authService: AuthService, private home: HomeComponent) 
   { }

  searchapicall(searchValue: string) {
    this.authService.setSearchApi(this.value).subscribe(results => {
      this.SearchResult = results;
      console.log("--------------------->", results);
      this.found.emit(results);
    });
    if (searchValue == '') {
      this.home.getOrderList(); <================ this function is in home component.
    }
  }

score 0 · Answer 1 · answered Aug 14 '21 at 11:33

In Angular we don't import components like this, this notation is used for injecting services only.

If you want to call function of child component you can use ViewChild.
If the components are not related you can use a behavior subject to subscribe and call the method.

Create a service,

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

@Injectable()
export class DataService {

  private searchResult = new BehaviorSubject(null);

  constructor() { }

  setSearchResult(message: any) {
    this.searchResult.next(message)
  }
  get getSearchResult(){
    this.searchResult.asObservable();
}

}

In your nav component

 if (searchValue == '') {
      this.data.setSearchResult(true)
      this.home.getOrderList(); <================ this function is in home component.
    }

In your home component

 searchResultSubscription: Subscription | undefined;
 constructor(private data: DataService) {
     // in ngOnDestroy, unsubscribe using this searchResultSubscription 
     searchResultSubscription =  this.data.getSearchResult.subscribe(message => { if(message) this.getOrderList()});
  }

For reference, you can check https://stackoverflow.com/questions/37587732/how-to-call-another-components-function-in-angular2 For view child, https://www.digitalocean.com/community/tutorials/angular-viewchild-access-component — amnah, Aug 14 '21 at 11:34
Thanks for the information. For now being I have just added `@ViewChild` in nav-bar component and working. — Optimist Rohit, Aug 14 '21 at 16:01

score 0 · Answer 2 · answered Aug 14 '21 at 16:07

Like to thank amnah for the answer. Although I managed to work in this way. Though I found Observable is a better approach.

@Output() public found = new EventEmitter<any>();
@ViewChild ('home') home! : HomeComponent;
  constructor(private authService: AuthService, private home: HomeComponent) 
   { }

  searchapicall(searchValue: string) {
    this.authService.setSearchApi(this.value).subscribe(results => {
      this.SearchResult = results;
      console.log("--------------------->", results);
      this.found.emit(results);
    });
    if (searchValue == '') {
      this.home.getOrderList(); <================ this function is in home component.
    }
  }

Including one component function to another causing NullInjector error

2 Answers2