🔄 How to Extend Component Logic and Template in Angular (Simple Guide) => use of extends and ngTemplateOutlet

When building Angular apps, you might have common logic or reusable layouts across components. Instead of duplicating code, you can use extends in TypeScript and ng-template + ngTemplateOutlet in HTML.

Let’s walk through a simple example with 2 components where one extends logic and also injects custom HTML.

---

✅ Step 1: Create a Child Component (as base layout)

This is the reusable component that contains a common layout and logic.

child.component.ts

import { Component, Input, TemplateRef } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', }) export class ChildComponent { @Input() title: string = 'Base Title'; @Input() contentTemplate?: TemplateRef<any>; getTitle(): string { return this.title; } }

child.component.html

<div class="card"> <h2>{{ getTitle() }}</h2> <ng-container *ngIf="contentTemplate; else defaultContent"> <ng-container *ngTemplateOutlet="contentTemplate"></ng-container> </ng-container> <ng-template #defaultContent> <p>This is default content from ChildComponent.</p> </ng-template> </div>

• ✅ Layout and logic are defined here.
• ✅ Accepts external HTML through contentTemplate.

---

✅ Step 2: Create a Parent Component That Extends Child

This component inherits logic from ChildComponent and injects its own template content.

parent.component.ts

import { Component, TemplateRef, ViewChild } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html', }) export class ParentComponent extends ChildComponent { @ViewChild('customHtml', { static: true }) customHtml!: TemplateRef<any>; override title = 'Title from ParentComponent'; ngOnInit() { this.contentTemplate = this.customHtml; } }

parent.component.html

<ng-template #customHtml> <p>This is custom HTML from <strong>ParentComponent</strong>.</p> </ng-template> <app-child [title]="title" [contentTemplate]="contentTemplate"></app-child>

• ✅ Inherits logic like title and getTitle() from ChildComponent.
• ✅ Injects its own content via ng-template.

---

✅ Final Output

• ChildComponent provides the reusable layout.
• ParentComponent injects dynamic HTML and extends the logic.
• This keeps your code DRY, clean, and scalable.

Use Cases: shared card layouts, reusable modal structures, dashboards, etc.