Angular MCP
MCP tools such as get_best_practices, ai_tutor, find_examples.
Attribute binding
Bind HTML attributes using the attr. prefix.
Best Practices
Build AI-powered applications with Firebase AI Logic and Angular
Build AI-powered applications with Gemini API and Angular
Build AI-powered applications with Genkit and Angular
Build with AI
@Component Decorator
Contains configuration used by Angular for a component.
Component Imports
Import a component and add it to the imports array of the @Component decorator.
Components
Organized yet modular app structure via Angular components.
Computed signals
A read-only signal whose value derives from other signals and updates automatically.
Connecting to model providers and keeping your API Credentials Secure
Control Flow
CSS Selector
Defines how the component is used in HTML.
Deferrable Views
Dependency Injection
Modular architecture supported by dependency injection.
Event listener
Add event listeners with parentheses and the $event variable.
FieldTree
Object structure mirroring the model shape, with nodes accessible via dot notation.
First-party modules
First-party modules for forms, routing, and more.
@for block
Repeat template parts with the track keyword.
[formField] directive
Binds HTML inputs to form fields with two-way binding and syncs required, disabled, readonly.
Forms
First-party module for forms.
Getting Started
Handling non-deterministic responses
HTML Template
Controls what renders into the DOM.
Hydration
@if block
Conditionally show or hide template parts, with optional @else.
inject Function
Built-in function that creates and returns a service instance for injection.
Interpolation
Show dynamic text with double curly braces.
Property binding
Bind dynamic values into DOM properties with square brackets.
Routing
First-party module for routing.
Separate Template and Style Files
Define a component's HTML and CSS in separate files using templateUrl and styleUrl.
Services
Reusable pieces of code declared with the @Service decorator that can be injected.
Signal Forms
Manage form state using Angular signals with automatic model-UI synchronization.
signal function
Creates a signal to hold local state; read by calling it, change with set or update.
Signals
Reactive and fast state updates with fine-grained reactivity based on Angular Signals.
Signals in components
Use signal and computed inside components to create and manage state.
Use Tool Calling to enhance apps
Validation and state
FieldTree nodes return reactive state signals for value, validation status, and interaction state.