How to search through static data across multiple Angular components?

Question

I was wondering how, if at all possible, I could set up a search that would work across multiple components in Angular. All of the components that would be targeted are hardcoded.

I've already tried looking around on google and various other locations and the only results refer to searches with databases, which is not the case for my application.

Answer 1

You could make a service with BehaviorSubject in it. It would serve as a global state and every component injected with service would manipulate observable or observe changes.

@Injectable({providedIn: 'root'})
public class Service {
items BehaviorSubject<any[]>

  constructor() {
    this.items = new BehaviorSubject([...]);
  }
}

public class Component1 {
  constructor(private _service: Service) {
    this._service.items.subscribe(pr => {})
  }
}

public class Component2 {
  constructor(private _service: Service) {}

  search() {
    this._service.items.next([...])
  }
}