Creating Custom Generators with ng generate

This is Part 2 of a 6-part series on Angular Schematics.

• ✅ Part 1 — Understanding Angular Schematics: Architecture & Core Concepts
• Part 2 — Creating Custom Generators with ng generate ← You are here
• 🔜 Part 3 — Building Installation Schematics with ng add
• 🔜 Part 4 — Writing Migration Schematics with ng update
• 🔜 Part 5 — Testing Schematics with Angular DevKit
• 🔜 Part 6 — Advanced Patterns, Publishing & Nx Integration

References

The following official Angular documentation and source references were used in preparing this article:

• Angular CLI — Schematics for Libraries — Official Angular docs on providing generation support via schematics
• Angular DevKit Schematics — Templating — The DevKit README section covering the template engine and filename syntax
• Angular DevKit Schematics — Full README — Complete reference for @angular-devkit/schematics

In Part 1 we covered the architecture of Angular Schematics — the Tree, Rule, Source, SchematicContext, and the execution pipeline. Now it's time to build something real.

We are going to keep this focused. By the end of this article you will have written a schematic that generates a single Angular component with your team's custom selector prefix baked in — no configuration, no remembering the --prefix flag, no inconsistency across the codebase.

One command:

ng generate my-org-schematics:component my-button

Produces:

CREATE src/app/my-button/my-button.component.ts
CREATE src/app/my-button/my-button.component.html
CREATE src/app/my-button/my-button.component.spec.ts

Where every selector is automatically prefixed — acme-my-button instead of app-my-button. Simple, repeatable, enforceable.

Table of Contents

1. Setting Up the Workspace
2. Project Structure