I have several components on different routes that have mostly static templates. I would like to search those templates for any string and return the matching text content.

I am able to do this by manually copying the text content of each template and storing it in an object. This creates 2 sources of truth for the content of these pages. Meaning every update to one has to also be done in the other.

Is there any way I can architecture this so there is a single source of truth?

Things I've Tried

1. Keeping all of the html in the data object, but then I lose all the functionality of the components. No routerLink, no shared components (using a dialog component to enlarge images), etc.
2. Duplicating content into the data object
3. Keeping all of html in the templates, but then how could I search it...

Potential Ideas

• Import component templates into the constructor?
  • Then parse them in ngOninit to create the object
  • Not sure this is even possible
• Store the template text contents in a service
  • Each component would send its text content to the service in ngOninit or ngAfterViewInit
  • But then how would you initialize all of the components if they are on different routes?
• Have one giant search component that initializes all of the searchable components
  • Sounds like it would have a huge negative impact on performance
  • Edit: Just tried this and yes it makes the app verrry slow

Example Routes

const routes: Routes = [
    {
        path: '',
        component: UserGuideComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'introduction',
                component: IntroductionComponent
            },
            {
                path: 'introduction/quick-links',
                component: QuickLinksComponent
            },
            {
                path: 'build-survey',
                component: BuildSurveyComponent
            },
            {
                path: 'build-survey/content',
                component: ContentComponent
            },
            ...
            // there will be a lot more pages
        ]
    }
];