Directive
A directive is a framework-specific instruction attached to markup that controls processing, rendering, or the behavior of an element or template.
Pro Angular 16
An Angular directive is a class or construct that changes the behavior or presentation of an HTML element to which it is applied.
- How it is used
- Adapts template elements to application data through built-in content and styling directives or application-specific behavior.
- How deep it goes
- Works through built-in choices and attribute-directive construction, then extends to template exports, custom validation, and testing.
- Examples
- Uses a repeated product list, class-configured table cells, an exported input directive, and a price-range validator.
- What you can do after
- Build it from scratch with @Directive, configure it through host attributes, and apply built-in directives in templates.
ASP.NET Core in Action, 3e
A Razor directive is an instruction beginning with @ that controls compilation or behavior of a Razor file.
- How it is used
- Controls Razor parsing, routing, namespace availability, PageModel association, and shared view configuration.
- How deep it goes
- Explains directive effects and placement, but stops short of detailed compiler internals.
- Examples
- Uses @page, @model, @using, @addTagHelper, _ViewImports.cshtml, and _ViewStart.cshtml examples.
- What you can do after
- Apply it via ASP.NET Core Razor Pages to route views, associate PageModels, import namespaces, and share view settings.
Build a Frontend Web Framework (From Scratch)
A framework-specific instruction attached to markup that changes the behavior, rendering, or processing of an element.
- How it is used
- Uses template instructions to control DOM behavior from application state.
- How deep it goes
- Defines conditional display and array iteration but stops short of implementing directive processing.
- Examples
- Uses Vue v-if, a Svelte if block, and a React JSX conditional expression.
- What you can do after
- Evaluate how frameworks express state-dependent element rendering in templates or JSX.
Read how Build a Frontend Web Framework (From Scratch) explains directive →
Related concepts
- ngOnChangesimplements · ngOnChanges is an Angular lifecycle hook method called when a directive or component’s data-bound input properties change, including during initialization.
- componentincludes · A software component is a modular part of a larger system that provides related functionality and interacts with other parts through defined boundaries or interfaces.
- ngClassincludes · ngClass is an Angular directive that conditionally manages an element’s CSS classes from bound values or expressions.
- structural directiveincludes · A structural directive is an Angular directive that changes a template's structure by creating, removing, or transforming embedded views.
- model directiveincludes · The @model directive is a Razor directive that declares the model type associated with a page or view.
- Document Object Modeluses · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
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.