🔄 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.

🧹 How to Remove SSR (Server Side Rendering) from an Angular 19 Project

Sometimes you add Angular SSR using @angular/ssr, but later want to return to a clean client-side app. Here's how to fully remove SSR (Server-Side Rendering) from your Angular project. 🔥 Step 1: Delete SSR Files Remove these files from the src/ folder: main.server.ts app.server.module.ts server.ts Any .server.ts files like: app.routes.server.ts app.config.server.ts 🛠️ Step 2: Update angular.json Inside "architect > build > options", remove the following: "server": "src/main.server.ts", "outputMode": "server", "ssr": { "entry": "src/server.ts" } Also remove the entire "server" block from angular.json if it exists. 🧾 Step 3: Clean Up TypeScript Config ❌ Delete: tsconfig.server.json ✅ Edit tsconfig.app.json like this: { "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", "types": [] }, "files": [], "include": ["src/**/*.ts"] } 🧹 Step 4: Uninstall SSR Dependencies 🖥️ Run in Terminal / PowerShell / CMD: npm uninstall @angular/platform-server @nguniversal/express-engine express 🚀 Step 5: Clean & Serve PowerShell (Windows): Remove-Item -Recurse -Force node_modules, dist, .angular npm install ng serve Mac/Linux terminal: rm -rf node_modules dist .angular npm install ng serve ✅ Done! Your Angular app is now SSR-free and runs entirely with Client-Side Rendering (CSR) — faster dev, fewer headaches!