Structural directive
A structural directive is an Angular directive that changes a template's structure by creating, removing, or transforming embedded views.
Pro Angular 16
A structural directive is an Angular directive that changes the rendered document structure by creating, removing, or repeating template content.
- How it is used
- Uses structural directives to add conditional content or repeat template content for data-source values.
- How deep it goes
- Works through template syntax, custom directive construction, module registration, and change handling, including the cost of rebuilding views.
- Examples
- Uses a checkbox-controlled product table, generated product rows, and page-navigation buttons.
- What you can do after
- Build it from scratch using @Directive, TemplateRef, ViewContainerRef, an input, and a module declaration.
Modern Angular
A structural directive is an Angular directive that changes a template's structure by creating, removing, or transforming embedded views.
- How it is used
- Simplifies conditional and dynamically composed Angular templates, especially repeated loading overlays and complex UI branches.
- How deep it goes
- Explains embedded-view creation, component projection, input updates, and lifecycle-aware changes, while deferring broader directive fundamentals.
- Examples
- Uses nested loading overlays, a custom loading directive, *ngIf and *ngFor, and @if conditional notification and project-card templates.
- What you can do after
- Build it from scratch as a standalone directive that creates embedded views, renders dynamic components, projects content, and updates inputs.
Related concepts
- directivekind of · A directive is a framework-specific instruction attached to markup that controls processing, rendering, or the behavior of an element or template.
- attribute directivecontrasts with · An attribute directive is an Angular directive that changes the behavior or presentation of an existing HTML element without changing the document structure.
- micro-templateuses · A micro-template is a small Angular template represented by an inner element whose content can be conditionally included or excluded.
- ngFor bindingincludes · ngFor is an Angular structural directive that renders a template once for each item in an iterable collection.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.