DEV Community

Alex Spinov
Alex Spinov

Posted on

Angular 17 Has a Free API That Most Developers Don't Know About

#angular #webdev #javascript #typescript

Angular 17 introduced a revolutionary new approach to building web applications with signals, deferred loading, and a completely revamped control flow. But what most developers miss is that Angular's tooling ecosystem exposes powerful APIs you can use programmatically.

The Angular CLI API

Angular's CLI is not just a command-line tool — it's a programmable build system built on top of the Angular DevKit. You can use it to:

  • Generate components programmatically using schematics
  • Analyze your project structure via the workspace config API
  • Run custom builders that hook into the Angular build pipeline
  • Lint and transform code using the Angular ESLint API

Schematics: Angular's Code Generation API 

import { SchematicEngine } from "@angular-devkit/schematics";
import { NodeModulesEngineHost } from "@angular-devkit/schematics/tools";

const engineHost = new NodeModulesEngineHost();
const engine = new SchematicEngine(engineHost);

// Load Angular schematics collection
const collection = engine.createCollection("@schematics/angular");

// Create a component schematic
const schematic = collection.createSchematic("component");
Enter fullscreen mode Exit fullscreen mode

This lets you build custom code generators, migration tools, and project scaffolding systems.

Angular Compiler API

The @angular/compiler package gives you direct access to Angular's template parser:

import { parseTemplate } from "@angular/compiler";

const result = parseTemplate(
  `<div *ngIf="show">{{ title }}</div>`,
  "template.html"
);

console.log(result.nodes); // AST of the template
Enter fullscreen mode Exit fullscreen mode

You can use this to:

  • Build custom linting rules for Angular templates
  • Create documentation generators
  • Analyze template complexity
  • Build migration tools (e.g., from *ngIf to @if)

Angular CDK: A Free UI Toolkit API

The Component Dev Kit (CDK) is Angular's secret weapon — a set of behavior primitives:

import { DragDropModule } from "@angular/cdk/drag-drop";
import { ScrollingModule } from "@angular/cdk/scrolling";
import { OverlayModule } from "@angular/cdk/overlay";
import { A11yModule } from "@angular/cdk/a11y";
Enter fullscreen mode Exit fullscreen mode

Each module is a standalone API:

  • Drag & Drop — full drag-and-drop with sorting, previews, placeholders
  • Virtual Scrolling — render millions of items efficiently
  • Overlay — position floating elements (tooltips, dropdowns, modals)
  • Accessibility — focus traps, live announcements, keyboard navigation

Angular Signals API (v17+) 

import { signal, computed, effect } from "@angular/core";

const count = signal(0);
const doubled = computed(() => count() * 2);

effect(() => {
  console.log(`Count is ${count()}, doubled is ${doubled()}`);
});

count.set(5); // Triggers effect automatically
Enter fullscreen mode Exit fullscreen mode

Signals are Angular's reactive primitive — fine-grained reactivity without RxJS complexity.

Real-World Use Case

I built a web scraping dashboard using Angular 17's signals for real-time data updates. The CDK's virtual scrolling handled 100K+ scraped records smoothly, and the overlay API powered the data preview popups.

Need to scrape data for your Angular app? Check out my web scraping tools on Apify — get structured data from any website in minutes, no coding required.

Need a custom scraping solution? Email me at spinov001@gmail.com — I've built 78+ production scrapers.

Top comments (0)