Get angular (9) component template data without initializing component

Viewed 125

We have made an help section in angular (currently version 9 with ivy). This section is built up using small components for every part of the help. One help page consists of one or many components.

One page do not contain all components though.

We would now like to have a search for the help section. The search should be able to detect hits in all text (raw html is fine) in all components html templates, including those that are not visible at the moment.

Is there any way to access the template data/html of an component if it is not currently being shown/instantiated?

1 Answers

You'd want to search, not in the components per se, but in the data that the components are bound to.

That data should live in the top-level component, or in a service that all of the sub-components share.

If the action of searching is itself buried within a sub-component, which it probably is, you would typically have the search method live inside the shared service, and you would call it from your sub-component.

That would be the cleaner way. If you're not using a service, but rather passing the data from the top-level component to the sub-components through input bindings, you will have to fire off an event from the search sub-component that the top-level component will subscribe to.

For more info, check out https://angular.io/guide/component-interaction and https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/.

Related