I’m building a multi-page site in Angular 17. I have 4 main sections, each with their own unique subnav. At the moment, I’m manually adding the subnav component to each HTML template in the section, but it’s somewhat bothersome to have to do that manually. Is it possible to have one HTML template inherit from another HTML template? Here’s a screenshot of what I currently have:

At the moment there’s nothing in the tools page or tools subnav components.

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

@Component({
  selector: 'app-tools-page',
  templateUrl: './tools-page.component.html',
  styleUrl: './tools-page.component.scss'
})
export class ToolsPageComponent {}

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

@Component({
  selector: 'app-tools-subnav',
  templateUrl: './tools-subnav.component.html',
  styleUrl: './tools-subnav.component.scss'
})
export class ToolsSubnavComponent {}

This is all there is in the tools-page-component.html file:

<app-tools-subnav></app-tools-subnav>

This is what the tools-create-topic-header.html component HTML file looks like:

<app-tools-subnav></app-tools-subnav>
<div class="main">
    <h2>Create Topic Header</h2>
    ...
</div>

So what I’m asking is if there’s a way to somehow have the subnav be automatically appended to the section HTML files, or those sub components could somehow inherit from the “main” tools component causing the subnav to be added automatically.