如何从另一个组件调用函数 [Angular]

Question

I'm new to Angular. This question is very much similar to mine but doesn't answers my question. In my case, the two components are stand-alone, that means they ain't parent-child to each other. They're separate and at same directory level. That's why my problem is different from the rest. I tried using:

1. @ViewChild();
2. @Output() ....EventEmitter()

But I'm still getting an error in navbar.component.ts :

ERROR TypeError: "this.articles is undefined"

My first component is NavBar and my second component is Articles

So the scenarioa is, pressed() method of NavBar have to call callSearch(arg) method of Articles .

Here is my navbar.component.ts

import { ..., ViewChild } from '@angular/core';
import { ArticlesComponent } from '../articles/articles.component';

@Component({
  ...
})
export class NavbarComponent implements OnInit {

  text='something';

  @ViewChild(ArticlesComponent, {static: false}) articles: ArticlesComponent;

  constructor() { }

  /*  This method is called on click event from HTML page*/
  pressed(text: string) {
    this.articles.callSearch(text);
  }

  ngOnInit() {
  }
}

navbar.component.html

<li class="nav-item">
  <button class="btn" (click)="pressed(text)">Search</button>
</li>

And here is the component whose method I want to call from NavBar.

articles.component.ts

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

@Component({
  ...
})
export class ArticlesComponent implements OnInit {

  articles = [];
  filteredArticles=[];

  constructor(...) { }

  ngOnInit() {
    ...
  }

  /*  this is called from navbar typescript and it will call SearchFunction below*/
  callSearch(text: string) {
    this.SearchFunction(text);
  }

  SearchFunction(text: string) {
    this.filteredArticles=(this.articles.filter(e => {
      /* some logic*/
    }));
  }
}

articles.component.html

<div *ngFor="let article of filteredArticles; let i = index;">
  <div class="card text-center">
    <div class="card-body">
      <!-- card design related html -->
    </div>
  </div>
</div>

Please correct me.

PS: Here is the stackblitz .

Answer 1

To communicate two components that are not related to each other, you can use a service.

    @Injectable({
    providedIn: 'root',
})
export class YourService {

    private yourVariable: Subject<any> = new Subject<any>();


    public listenYourVariable() {
        return this.yourVariable.asObservable();

    }


    private yourVariableObserver(value : type) {
        this.yourVariable.next(value);
    }

You import in yours components where you want use it this service.

import{ YourService } from ...

In component you want write the data call:

this.yourService.yourVariableObserver(yourData);

while where you want read the data:

 this.yourService.listenYourVariable().subscribe(
    variable => {
      this.data = variable;
      this.callyourFunction();
    }

)

Obviously you can simple call the function without pass any value.