Angular
Lộ trình phát triển toàn diện Angular theo tiêu chuẩn quốc tế nilbuild/developer-roadmap
Hướng dẫn từng bước từ nền tảng đến chuyên sâu giúp bạn làm chủ Angular. Tích hợp tài liệu lý thuyết, bài viết thực chiến, video tham khảo và bài tập lập trình trực tiếp trên IDE.
Nền Tảng & Khái Niệm Cốt Lõi
Giai đoạn 1 tập trung hoàn thiện 32 chủ đề then chốt.
Accessibility
The web is used by a wide variety of people, including those who have visual or motor impairments. A variety of assistive technologies are available that make it much easier for these groups to interact with web-based software applications. Also, designing an application to be more accessible generally improves the user experience for all users.
AnalogJS
AnalogJS is a full-stack meta-framework powered by Vite and Nitro for Angular. Analog supports both Server-Side Rendering (SSR) and Static Site Generation (SSG). Analog uses file-based routing and supports API (server) routes.
Angular and History
Angular is a TypeScript-based open-source front-end web framework developed and maintained by Google. It is used for building dynamic, single-page web applications (SPAs). Angular provides comprehensive tools, including dependency injection, data binding, routing, and testing, to create robust and scalable web applications.
Angular Architecture
Angular architecture describes the structure of an application through a collection of interconnected building blocks, including modules, components, services, and directives. Components define the user interface by managing specific views, while services handle data and shared business logic. These elements are organized into modules that act as containers, allowing the framework to manage dependencies and organize code into logical, reusable units that communicate through data binding and dependency injection.
Angular CLI
The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications directly from a command shell. we can install angular latest CLI using the following command: `npm install -g @angular/cli`
Animation
Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more.
AoT Compilation
Angular applications require a compilation process before they can run in a browser. The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.
Attribute Binding
Attribute binding in Angular helps you set values for attributes directly. With attribute binding, you can improve accessibility, style your application dynamically, and manage multiple CSS classes or styles simultaneously.
Attribute Directives
Attribute directives are classes that modify the appearance or behavior of an existing DOM element. They are applied to elements as attributes, allowing you to change styles, toggle classes, or register event listeners on specific components. Unlike structural directives that change the DOM layout by adding or removing elements, attribute directives operate directly on the element they are attached to without altering the surrounding structure.
Attributes
Building accessible web experience often involves setting Accessible Rich Internet Applications (ARIA) attributes to provide semantic meaning where it might otherwise be missing. Use attribute binding template syntax to control the values of accessibility-related attributes.
Build Environments
You can define different named build configurations for your project, such as `development` and `production`, with different defaults. Each named configuration can have defaults for any of the options that apply to the various builder targets, such as `build`, `serve`, and `test`. The Angular CLI can replace files for each environment if you pass a `--configuration` flag with the named configuration when running a CLI command.
@case
The `@case` block is a control flow directive used within template expressions to match a specific value against an expression defined in a preceding `@switch` statement. When the value associated with a `@case` matches the switch expression, the content inside that block renders to the DOM. If no match is found among the defined cases, the template can optionally display a `@default` block as a fallback.
Change detection
Change detection is the process through which Angular checks to see whether your application state has changed, and if any DOM needs to be updated. At a high level, Angular walks your components from top to bottom, looking for changes. Angular runs its change detection mechanism periodically so that changes to the data model are reflected in an application’s view. Change detection can be triggered either manually or through an asynchronous event
Change Detection
Change detection is the mechanism that keeps the user interface in sync with the underlying application state. It automatically monitors the component's data and updates the Document Object Model (DOM) whenever changes occur. This process ensures that the view accurately reflects the current values of class properties, whether triggered by user events, timers, or network requests.
CLI Builders
A number of Angular CLI commands run a complex process on your code, such as building, testing, or serving your application. The commands use an internal tool called `Architect` to run CLI builders, which invoke another tool (bundler, test runner, server) to accomplish the desired task. Custom builders can perform an entirely new task or to change which third-party tool is used by an existing command.
Code Coverage
The Angular CLI can run unit tests and create code coverage reports. Code coverage reports show you any parts of your code base that might not be properly tested by your unit tests.
Combination
RxJS combination operators merge multiple observables into a single one using various strategies. Key operators include: `Merge` (emits items from all sources as they arrive), `Concat` (emits items from sources sequentially, one after another), `Zip` (pairs emissions from sources based on index), `CombineLatest` (emits based on the latest values from all sources whenever any source emits), `WithLatestFrom` (combines the value of one observable with the latest values of others when the first observable emits), and `ForkJoin` (emits the last value from each source only after all sources complete).
Common Pipes
Common pipes are built-in transformation tools that allow you to format data directly within your templates for display. They handle tasks such as converting dates into readable strings, changing text to uppercase or lowercase, formatting numbers as currency, and transforming objects into JSON strings. By using these pipes, you can modify the appearance of dynamic data without needing to write extra logic in your component classes.
Component Communication
Component communication is the process of sharing data between different parts of an application's user interface. It involves passing information from a parent component to a child using input properties, or sending data from a child back to a parent through output events and event emitters. For components that do not share a direct relationship, services or state management patterns are often used to facilitate the transfer of data across the application.
Complex Sequences
Complex sequences involve orchestrating multiple animation steps or staggered effects to occur in a specific order. This process uses the `query` and `stagger` functions to control the timing and execution of individual elements within a container. By chaining these animations together, developers create sophisticated motion patterns that transition smoothly between different states or views.
Component Anatomy
A component in Angular consists of three main parts: a TypeScript class that handles the logic and data, an HTML template that defines the visual structure, and CSS styles that control the appearance. These parts work together to encapsulate a specific piece of the user interface, allowing developers to define how a section of the application behaves and looks in one unified location.
Testing component bindings
Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components. Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
Lifecycle hooks
A component instance has a lifecycle that starts when Angular instantiates the component class and renders the component view along with its child views. The lifecycle continues with change detection, as Angular checks to see when data-bound properties change, and updates both the view and the component instance as needed. The lifecycle ends when Angular destroys the component instance and removes its rendered template from the DOM. Directives have a similar lifecycle, as Angular creates, updates, and destroys instances in the course of execution.
Testing component templates
With a component template , you can save and reuse component processes and properties and create components from them; template-based components inherit the template's properties and process.
Components
Components are the fundamental building blocks of an application that define how a specific part of the user interface looks and behaves. Each one consists of a TypeScript class that manages data and logic, an HTML template that defines the structure, and CSS styles that control the visual appearance. They function as independent units that can be nested within one another to construct complex page layouts.
Configuration
The configuration of routes in an Angular application involves defining route mappings in an array and providing these routes to the Angular router.
Containers
Some Angular Material UI components cannot take children, such as an input, so you need to use container elements to customize the UI component.
ContentChild
ContentChild is a decorator used to access the first element or directive that matches a specific selector from the content projected into a component. It allows a parent component to interact directly with elements or child components passed through `<ng-content>` by providing a reference to the DOM element or class instance. This mechanism enables the parent to read properties, call methods, or manipulate the child elements that are injected within the component's template.
Control Flow
Control flow is a syntax mechanism that allows developers to define conditional logic and list rendering directly within HTML templates. It provides built-in directives like `@if`, `@else`, and `@for` to manage the dynamic appearance of elements based on component state. This approach simplifies template management by replacing older structural directives with a more intuitive and readable block-based structure.
Control Value Accessor
Defines an interface that acts as a bridge between the Angular forms API and a native element in the DOM. Implement this interface to create a custom form control directive that integrates with Angular forms.
Creating Components
A component is the fundamental building block of a user interface that consists of an HTML template, a TypeScript class to handle logic, and CSS styles to define the appearance. To create one, you typically use the Angular CLI command `ng generate component` followed by the component name, which automatically scaffolds the necessary files and registers the new component within your module. Once created, you can define your application's structure by using the custom selector assigned to that component as an HTML tag within other templates.
Creating Libraries
If you have developed features that are suitable for reuse, you can create your own libraries. These libraries can be used locally in your workspace, or you can publish them as npm packages to share with other projects or other Angular developers. Putting code into a separate library is more complex than simply putting everything in one application. It requires more of an investment in time and thought for managing, maintaining, and updating the library. This complexity can pay off when the library is being used in multiple applications.
Kỹ Năng Trọng Tâm & Thực Hành
Giai đoạn 2 tập trung hoàn thiện 32 chủ đề then chốt.
Creating Modules
Creating modules in Angular helps organize your application into manageable, cohesive units. Each module can encapsulate related components, directives, pipes, and services. Here's a detailed guide on how to create and use modules in Angular.
Cross-site Request Forgery
Cross-site Request Forgery is a security vulnerability that tricks a user's web browser into performing unwanted actions on a different website where the user is currently authenticated. An attacker uses this flaw to execute unauthorized commands by leveraging the browser’s automatic inclusion of session cookies with every request sent to a specific domain. When a victim visits a malicious site while logged into an application, the attacker’s hidden scripts send forged requests that the server interprets as legitimate user instructions. This process compromises user data and account integrity by bypassing the intended verification steps of an application.
Cross-site Script Inclusion
Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to read data from a JSON API. The attack works on older browsers by overriding built-in JavaScript object constructors, and then including an API URL using a `<script>` tag. Angular's HttpClient library recognizes this convention and automatically strips the string ")\]}',\\n" from all responses before further parsing.
Cross-site Scripting
Cross-site scripting (XSS) enables attackers to inject malicious code into web pages. Such code can then, for example, steal user and login data, or perform actions that impersonate the user. This has been one of the biggest web security vulnerabilities for over a decade. To systematically block XSS bugs, Angular treats all values as untrusted by default. When a value is inserted into the DOM from a template binding, or interpolation, Angular sanitizes and escapes untrusted values.
Custom Directives
Custom Directives are user-defined classes that allow you to extend the functionality of HTML elements by attaching custom behavior or transforming the appearance of the Document Object Model. They serve as a mechanism to create reusable components that can manipulate DOM nodes, listen for events, or apply specific styling logic across various parts of an application. By creating these classes with a specific decorator, developers can define how an element should react to user interactions or changes in the data state.
Impure Pipes
Pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions in template expressions to accept an input value and return a transformed value. Pipes are helpful because you can use them throughout your application while only declaring each pipe once. For example, you would use a pipe to show the date as April 15, 1988, rather than the raw string format.
Custom Validators
Custom validators in Angular are functions that allow you to define your own validation logic for form controls. They are used when the built-in validators (like `required`, `minLength`, etc.) do not meet your specific validation requirements. A custom validator is a function that returns either `null` if the form control is valid, or an object that represents the validation error if it is invalid. This object typically contains a key-value pair where the key is the error name and the value is a boolean or some details about the error.
Data Binding
In an Angular template, a binding creates a live connection between a part of the UI created from a template (a DOM element, directive, or component) and the model (the component instance to which the template belongs). This connection can be used to synchronize the view with the model, to notify the model when an event or user action takes place in the view, or both. Angular's Change Detection algorithm is responsible for keeping the view and the model in sync. Bindings always have two parts: a target which will receive the bound value, and a template expression which produces a value from the model.
Debugging Tests
If your tests aren't working as you expect them to, you can inspect and debug them in the browser. Be sure to set breakpoints to track your application's execution.
@default
The `@default` clause is used to render a template when none of the `@case` blocks matches the value of the `@switch` conditional. `@default` is optional and can be omitted.
@defer
The @defer block is a mechanism that allows you to delay the loading of specific parts of your template until a defined condition is met. It works by postponing the initialization of components, directives, and pipes within the block to reduce the initial bundle size and improve the application's startup performance. You can trigger the loading process using built-in triggers like interaction, visibility, or time, while also specifying placeholder or loading states to display to the user while the content is being fetched.
Deferrable Views
Deferrable views can be used in component template to defer the loading of select dependencies within that template. Those dependencies include components, directives, and pipes, and any associated CSS. To use this feature, you can declaratively wrap a section of your template in a @defer block which specifies the loading conditions.
Dependencies
Dependencies are external pieces of code or services that a module needs to function correctly. When a module requires specific functionality provided by another part of the application, it lists these items as requirements to ensure they are available for use within the component ecosystem. This mechanism allows developers to organize shared code into manageable units that can be imported and utilized wherever necessary throughout the project.
Dependency Injection
Dependency Injection is one of the fundamental concepts in Angular. DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure dependencies that they need.
Deployment
The Angular CLI command `ng deploy` executes the deploy CLI builder associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project with `ng add`.
Developer Tools
Angular offers a suite of powerful developer tools designed to streamline and enhance the development process. These include the Angular CLI for efficient project setup and management, the Angular DevTools extension for advanced debugging and profiling, and the Angular Language Service for improved code editing and completion. Leveraging these tools will significantly improve your ability to write high-quality Angular code.
DevTools
Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications. You can view component trees and change detection cycles.
Directives
Directives are classes that allow you to extend the functionality of HTML elements by attaching custom behavior or transforming the appearance of the DOM. They act as markers that tell the framework to perform specific actions on an element, such as adding, removing, or changing its structure and style. There are three main types, including components, structural directives that modify layout, and attribute directives that change the look or behavior of existing elements.
Dynamic Components
In addition to using a component directly in a template, you can also dynamically render components. There are two main ways to dynamically render a component: in a template with `NgComponentOutlet`, or in your TypeScript code with `ViewContainerRef`.
Dynamic Forms
Dynamic forms in Angular are a flexible way to create forms where the structure (such as form fields and validation rules) is generated at runtime, rather than being hardcoded. By using Angular's `FormBuilder` and `FormGroup`, you can dynamically add, remove, or modify form controls based on user input, data fetched from a server, or other logic. This approach allows for creating complex forms that can adapt to different user scenarios, reducing the need for multiple form templates and making the codebase more maintainable and scalable.
Elf
Elf is a reactive immutable state management solution built on top of RxJS. It uses custom RxJS operators to query the state and pure functions to update it. Elf encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for experienced and inexperienced developers alike.
@else if
With the new control flow syntax, you gain `@else if` conditional blocks, something that is not possible with `@ngIf`. This addition makes the control flow syntax close to what we would write with just plain JavaScript.
@else
While the `@if` block can be helpful in many situations, it's common to also show fallback UI when the condition is not met. When you need a fallback, similar to JavaScript's else clause, add an `@else` block to accomplish the same effect.
Encapsulation
Encapsulation determines how the styles defined in a component are applied to the rest of the application. It offers three distinct strategies: Emulated, which uses shadow-piercing CSS to scope styles to the component; ShadowDom, which leverages the native browser Shadow DOM API for true style isolation; and None, which applies component styles globally to the entire document.
End-to-End Testing
End-to-end or (E2E) testing is a form of testing used to assert your entire application works as expected from start to finish or "end-to-end". E2E testing differs from unit testing in that it is completely decoupled from the underlying implementation details of your code. It is typically used to validate an application in a way that mimics the way a user would interact with it. The `ng e2e` command will first check your project for the "e2e" target. If it can't locate it, the CLI will then prompt you which e2e package you would like to use and walk you through the setup.
Enforce Trusted Types
It is recommended that you use Trusted Types as a way to help secure your applications from cross-site scripting attacks. Trusted Types is a web platform feature that can help you prevent cross-site scripting attacks by enforcing safer coding practices. Trusted Types can also help simplify the auditing of application code.
Event Binding
Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.
Feature Modules
Feature modules are `NgModules` for the purpose of organizing code. With feature modules, you can keep code related to a specific functionality or feature separate from other code. Delineating areas of your application helps with collaboration between developers and teams, separating directives, and managing the size of the root module.
Filtering
RxJS provides a variety of filtering operators that you can use to filter and transform the data in a stream. You can use these operators in combination with other RxJS operators to create powerful and efficient data processing pipelines.
@for
The `@for` block is a built-in control flow syntax used to render a list of items within a template. It allows you to iterate over collections by specifying a tracking expression that helps the framework efficiently update the DOM when the data changes. This syntax replaces the older structural directive approach and provides a more readable, declarative way to generate repeating elements based on an array or iterable.
Forms
Forms are structures used to collect, validate, and manage user input within a web application. They provide a way for users to interact with data by filling out fields, selecting options, or uploading files. In this framework, they offer tools to track changes, handle input validation, and synchronize data between the user interface and the underlying application model.
Guards
Guards are interfaces that tell the router whether it should allow a user to navigate to or away from a requested route. They function by executing a piece of logic that returns a boolean, a promise, or an observable to determine if the navigation process proceeds or is blocked. This mechanism provides a way to protect specific pages based on conditions like authentication status, user permissions, or unsaved form data.
Kiến Trúc Nâng Cao & Tối Ưu
Giai đoạn 3 tập trung hoàn thiện 32 chủ đề then chốt.
HTTP Client
Most front-end applications need to communicate with a server over the HTTP protocol, to download or upload data and access other back-end services. Angular provides a client HTTP API for Angular applications, the `HttpClient` service class in `@angular/common/http`.
HTTP Vulnerabilities
Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily on the server side, but Angular provides helpers to make integration on the client side easier.
HttpClient CSRF
HttpClient CSRF protection is a built-in mechanism that helps prevent Cross-Site Request Forgery attacks by validating requests against a security token. When this feature is enabled, the framework automatically reads a token from a cookie and sets it as an HTTP header for subsequent requests. The server then verifies this token to ensure that the request originated from the intended application rather than a malicious site.
Hydration
Hydration is the process that restores the server-side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes. Hydration can be enabled for server-side rendered (SSR) applications only. You can enable hydration manually by visiting your main application component or module and importing `provideClientHydration` from `@angular/platform-browser`.
@if
The @if block conditionally displays its content when its condition expression is truthy. Content is added and removed from the DOM based on the evaluation of conditional expressions in the @if and @else blocks.
Image Optimization
The NgOptimizedImage directive makes it easy to adopt performance best practices for loading images.
Imports
The `imports` property specifies the `standalone` component's template dependencies — those directives, components, and pipes that can be used within its template.
Input output
`@Input()` and `@Output()` give a child component a way to communicate with its parent component. `@Input()` lets a parent component update data in the child component. Conversely, `@Output()` lets the child send data to a parent component.
Inputs as Signals
Signal inputs allow values to be bound from parent components. Those values are exposed using a Signal and can change during the lifecycle of your component. Angular supports two variants of inputs: `Optional` and `Required`.
Internationalization
Internationalization, sometimes referenced as i18n, is the process of designing and preparing your project for use in different locales around the world. Localization is the process of building versions of your project for different locales.
Interpolation
Interpolation refers to embedding expressions into marked up text. By default, interpolation uses the double curly braces {{ and }} as delimiters. Angular replaces currentCustomer with the string value of the corresponding component property.
Introduction to Angular
Angular is a popular open-source front-end web application framework developed by Google. It is written in TypeScript and allows developers to build dynamic, single-page web applications with ease. Angular provides a comprehensive set of features for creating interactive and responsive user interfaces, making it a powerful tool for modern web development.
Language Service
The Angular Language Service provides code editors with a way to get completions, errors, hints, and navigation inside Angular templates (external and in-line). Anytime you open an Angular application for the first time, an installation prompt will occur.
Lazy Loading Modules
By default, NgModules are eagerly loaded. This means that as soon as the application loads, so do all the NgModules, whether they are immediately necessary or not. For large applications with lots of routes, consider lazy loading —a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.
Lazy loading
Lazy loading is a technique in Angular that allows you to load JavaScript components asynchronously when a specific route is activated. It improves the application load time speed by splitting the application into several bundles. The bundles are loaded as required when the user navigates through the app.
@let
The `@let` declaration is a template syntax feature that allows you to define local variables directly within an Angular template. It enables you to assign values to a variable name that can be reused throughout a specific section of the markup, which helps simplify complex expressions and improves code readability. These variables are immutable and scoped strictly to the template block where they are defined.
Library
Use the Angular CLI and the npm package manager to build and publish your library as an npm package.
Link Identification
CSS classes applied to active `RouterLink` elements, such as `RouterLinkActive`, provide a visual cue to identify the active link. Unfortunately, a visual cue doesn't help blind or visually impaired users. Applying the `aria-current` attribute to the element can help identify the active link.
Local Setup
To install Angular CLI on your local system, you need to install `Node.js`. Angular requires an active LTS or maintenance LTS version of Node. Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser. Once you have Node installed, you can run `npm install -g @angular/cli` to install the Angular CLI.
Locales by ID
Angular uses the Unicode locale identifier (Unicode locale ID) to find the correct locale data for internationalization of text strings. A locale ID specifies the language, country, and an optional code for further variants or subdivisions. A locale ID consists of the language identifier, a hyphen (-) character, and the locale extension. By default, Angular uses `en-US` as the source locale of your project.
Localize Package
To take advantage of the localization features of Angular, use the Angular CLI to add the `@angular/localize` package to your project. If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the i18n attributes in templates), the Angular CLI will generate an error, which would contain the steps that you can take to enable i18n for your project.
Making Requests
`HttpClient` has methods corresponding to the different HTTP verbs used to make requests, both to load data and to apply mutations on the server. Each method returns an RxJS `Observable` which, when subscribed, sends the request and then emits the results when the server responds.
Metadata
Metadata in Angular components refers to the configuration information that is used to define and configure the behavior of a component. It is specified using decorators, which are functions that add metadata to classes, properties, and methods.
Model Inputs
Model inputs are a special type of input that enable a component to propagate new values back to another component. Use model inputs in components that exist to modify a value based on user interaction.
Module Architecture
Angular's **module architecture** uses **NgModules** to organize applications into cohesive units. These modules group related components, directives, pipes, and services, promoting modular development. Key types include the **root module** (entry point), **feature modules** (specific functionality, often lazily loaded), and **shared modules** (reusable code). This approach significantly enhances code organization, scalability, and maintainability.
Modules
Modules are containers that group related components, directives, pipes, and services together to define a cohesive block of functionality. They act as a central organizing mechanism that helps structure an application into distinct features, allowing for controlled access and clear boundaries between different parts of the code. By consolidating these elements, modules determine how various pieces of an application interact and how they are bundled together for the browser.
Multiple Locales
Multiple locales represent the configuration and management of various language and regional settings within an application to support a global user base. This approach involves defining specific locale data, such as date formats, currency symbols, and number representations, for each target region. Applications use these definitions to switch the interface dynamically, ensuring that content and data formatting match the cultural expectations of users in different parts of the world.
NgRx
NgRx is a framework for building reactive applications in Angular. NgRx simplifies managing application state by enforcing unidirectional data flow and providing tools like NgRx Store, NgRx Effects, NgRx Router Store, NgRx Signals, NgRx Entity, and NgRx Operators.
Ngxs
Ngxs is a state management pattern for the Angular framework. It acts as a single source of truth for our application. Ngxs is very simple and easily implementable. It reduce lots of boilerplate code . It is a replacement for Ngrx. In Ngrx we are creating state, action, reducer, and effects but in Ngxs, we are creating only state and actions instead of all of this. Like Ngrx, Ngxs is also asynchronous and when we dispatch any action we can get a response back.
Observable Lifecycle
An Observable lifecycle defines the stages a stream goes through from its initial creation to its eventual termination. It begins when an observer subscribes to the stream, triggering the execution of the producer function. Data values are then emitted sequentially to the observer until the stream completes successfully or encounters an error. Once the stream finishes or the observer explicitly unsubscribes, the execution stops and all associated resources are cleaned up to prevent memory leaks.
Observable Pattern
The observable pattern is a software design pattern where an object, known as the subject, maintains a list of dependents called observers and notifies them automatically of any state changes. In this model, the observable acts as a data source that pushes values over time to one or more subscribers. This approach allows components to handle asynchronous data streams, such as user events or HTTP requests, by reacting to new data as it becomes available.
RxJS Operators
RxJS operators are crucial functions that enable the declarative composition of complex asynchronous code. There are two primary types: **Pipeable Operators**, such as `filter()` or `mergeMap()`, which are chained using the `observableInstance.pipe()` method to transform an existing Observable into a new one without altering the original; and **Creation Operators**, like `of()` or `interval()`, which are standalone functions used to generate new Observables from scratch. This modular approach to handling asynchronous data streams greatly enhances code readability and maintainability.
Hệ Sinh Thái & Triển Khai Thực Tế
Giai đoạn 4 tập trung hoàn thiện 32 chủ đề then chốt.
Parent-Child Interaction
Parent-child interaction refers to the mechanism of data flow between a parent component and its nested child component. A parent component passes data down to a child using the `@Input()` decorator, which allows the child to receive and display dynamic information. Conversely, a child component sends information back to its parent by using an `EventEmitter` and the `@Output()` decorator to trigger events that the parent can listen for and respond to.
Performance
Angular’s performance is enhanced through key strategies such as Deferable Views for improved initial load times, Image Optimization techniques to reduce loading overhead, and mitigation of Zone Pollution to streamline change detection. Additionally, addressing Slow Computations enhances runtime efficiency, while Hydration techniques support faster, more interactive server-side rendered applications.
Pipes Precedence
Pipes precedence refers to the specific order in which multiple pipes are executed when chained together in a template expression. When you apply several pipes to a single data value, Angular processes them from left to right, passing the output of the first pipe as the input to the next. This sequence ensures that transformations are applied in a predictable, linear flow until the final result is ready for display.
Builtin pipes
Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application , some common pipes are `DatePipe` | `UpperCasePipe` | `LowerCasePipe` | `CurrencyPipe` | `DecimalPipe` | `PercentPipe`
Property binding
Property binding helps you set values for properties of HTML elements or directives. To bind to an element's property, enclose it in square brackets `[]` which causes Angular to evaluate the right-hand side of the assignment as a dynamic expression.
Providers
Providers are objects that tell the Angular dependency injection system how to obtain a value or an instance of a dependency. When a component or service needs a specific dependency, the provider acts as a configuration that instructs the injector to create that instance, return an existing one, or use a specific factory function to generate it. These instructions are typically defined within the metadata of a component or module to determine the scope and availability of the associated services.
Queries as Signals
A component or directive can define queries that find child elements and read values from their injectors. Developers most commonly use queries to retrieve references to components, directives, DOM elements, and more. There are two categories of query: view queries and content queries.
Rate Limiting Operators
Rate limiting operators control the frequency of event emissions within an observable stream by managing how often values are passed through. These operators allow developers to handle high-frequency events, such as keystrokes or scroll movements, by filtering out rapid-fire inputs based on time intervals or specific conditions. Common examples include debouncing to wait for a pause in activity, or throttling to enforce a fixed rate of execution.
Reactive Forms
Reactive Forms provide a model-driven approach to handling form inputs whose values change over time. This system uses explicit, immutable data structures to manage the state of a form, allowing you to track changes, validate inputs, and handle submissions programmatically within your component classes. By building forms through TypeScript objects, you gain granular control over complex validation logic and dynamic form generation.
Reusable Animations
To create a reusable animation, use the `animation()` function to define an animation in a separate .ts file and declare this animation definition as a const export variable. You can then import and reuse this animation in any of your application components using the `useAnimation()` function.
Route Transitions
When a user navigates from one route to another, the Angular router maps the URL path to a relevant component and displays its view. Animating this route transition can greatly enhance the user experience.
Router Events
The Angular Router raises events when it navigates from one route to another route. It raises several events such as `NavigationStart`, `NavigationEnd`, `NavigationCancel`, `NavigationError`, `ResolveStart`, etc. You can listen to these events and find out when the state of the route changes. Some of the useful events are route change start (NavigationStart) and route change end (NavigationEnd).
Router links
In Angular, routerLink when applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more `<router-outlet>` locations on the page.
Router Outlets
A router outlet is a placeholder component that marks the specific area on a page where the Angular router displays the content associated with the current URL. It acts as a dynamic container that switches its displayed view based on navigation events triggered by the user. When a route is matched, the router instantiates the corresponding component and renders it into this designated location within the application layout.
Routing
Tracking and controlling focus in a UI is an important consideration in designing for accessibility. When using Angular routing, you should decide where page focus goes upon navigation.
Routing
Routing is a mechanism that enables navigation between different views or components within a single-page application based on the URL. It maps specific web addresses to defined component states, allowing users to move through an application without triggering a full page reload. This system manages the browser history, handles parameter passing, and supports complex configurations like nested views or lazy loading to optimize application performance.
RxJS Basics
RxJS is a library for reactive programming that uses Observables to make it easier to compose asynchronous or callback-based code. It provides a vast collection of operators that allow developers to transform, filter, and combine streams of data over time. By treating events like clicks or HTTP responses as streams, this tool enables a declarative approach to managing complex data flows within an application.
RxJS Interop
Angular's `@angular/core/rxjs-interop` package provides useful utilities to integrate Angular Signals with RxJS Observables. Use a `toSignal` function to create a signal that tracks the value of an Observable. Use the `toObservable` utility to create an Observable which tracks the value of a signal.
RxJS vs Promises
RxJS Observables and JavaScript Promises are both patterns used to handle asynchronous operations, but they differ significantly in their capabilities and execution models. A Promise is designed to handle a single asynchronous event that eventually resolves to a value or rejects with an error, making it a one-time operation that cannot be cancelled once initiated. In contrast, an Observable represents a stream of zero, one, or multiple values over time, providing the ability to handle sequences of data, support operators for transformation, and allow for the cancellation of execution through unsubscription.
Sanitization
Sanitization is the process of inspecting and cleaning untrusted data to prevent malicious code from being executed in a web browser. It ensures that values injected into the DOM are stripped of dangerous elements, such as `<script>` tags or inline event handlers, while preserving safe content. This mechanism automatically filters data bound to templates to maintain a secure environment and protect the application from security vulnerabilities.
Schematics
A schematic is a template-based code generator that supports complex logic. It is a set of instructions for transforming a software project by generating or modifying code.
Security
This topic describes Angular's built-in protections against common web-application vulnerabilities and attacks such as cross-site scripting attacks. It doesn't cover application-level security, such as authentication and authorization.
Selector
In Angular, the `selector` metadata is a crucial property defined within the `@Component` decorator that specifies how the component can be identified and used in HTML templates. It determines the way the component is rendered in the DOM, allowing developers to create reusable and easily identifiable components.
Services
Services let you define code or functionalities that are then accessible and reusable in many other components in the Angular project. It also helps you with the abstraction of logic and data that is hosted independently but can be shared across other components.
Testing services with dependencies
When you add a dependency to your service, you must also include it in your tests. For isolated tests, pass an instance of the injectable dependency class into the service’s constructor. Using the `inject` function can add complexity. Injecting the real service is often impractical because dependent services can be difficult to create and control. Instead, mock the dependency, use a dummy value, or create a spy on the relevant service method. By using the TestBed testing utility, you can let Angular’s dependency injection handle service creation and manage constructor argument order.
Setting up a New Project
The Angular CLI provides a command-line interface to initialize, develop, and scaffold Angular applications. By running the `ng new` command, the tool generates a workspace with a predefined directory structure, configuration files, and necessary dependencies. This setup process ensures that the development environment is properly initialized with TypeScript, build tools, and testing frameworks, allowing you to begin coding immediately.
Setting Up the Client
Before you can use `HttpClient` in your app, you must configure it using dependency injection. `HttpClient` is provided using the `provideHttpClient` helper function, which most apps include in the application providers in `app.config.ts`. If your app is using NgModule-based bootstrap instead, you can include `provideHttpClient` in the providers of your app's `NgModule`.
Signals
Angular Signals is a system that granularly tracks how and where your state is used throughout an application, allowing the framework to optimize rendering updates.
Slow Computations
On every change detection cycle, Angular synchronously evaluates all template expressions in components based on their detection strategy and executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks. To remove slow computations, you can optimize algorithms, cache data with pure pipes or memoization, and limit lifecycle hook usage.
Angular SSG
SSG (Static Site Generator) helps in building the HTML full website during the process of building and serving that HTML page. This method helps to generate the HTML website on the client side before it's served on the server side. Therefore, whenever a user requests a HTML page, the HTML page will be rendered, and secondly, the Angular app will be rendered. The SSG can be used only if your website is static or its content doesn't change frequently.
SSR in Angular
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
Standalone
A standalone component is a component that sets `standalone: true` in its component metadata. Standalone components directly import other components, directives, and pipes used in their templates
Chuyên Gia & Mở Rộng Hệ Thống
Giai đoạn 5 tập trung hoàn thiện 31 chủ đề then chốt.
State Management
Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
Structural Directives
Structural directives are instructions used to modify the layout of the DOM by adding, removing, or manipulating elements. These directives are identified by an asterisk (*) prefix and control the structure of the application view based on specific conditions or data collections. Common examples include *ngIf for conditional rendering and *ngFor for repeating elements based on an array.
Styles
This metadata allows developers to apply CSS styles directly to a component, enhancing its appearance and ensuring that styles are scoped to that particular component.
@switch
The `@switch` blocks displays content selected by one of the cases matching against the conditional expression. The value of the conditional expression is compared to the case expression using the `===` operator. `@switch` does not have fallthrough, so you do not need an equivalent to a break or return statement.
Template-driven Forms
Template-driven forms use directives within the HTML template to manage form data and validation. They rely on the `ngModel` directive to create and bind a control to a data model automatically. This approach allows developers to handle simple form scenarios with minimal setup by defining the structure and logic directly inside the component's view.
Reference vars
Template reference variables help you use data from one part of a template in another part of the template. A template variable can refer to a DOM element within a template, component or directive. In the template, use the hash symbol, `#`, to declare a template reference variable.
Template statements
Template statements are methods or properties that you can use in your HTML to respond to user events. With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms. Enclose the event in `()` which causes Angular to evaluate the right hand side of the assignment as one or more template statements chained together using semicolon `;`.
Template Syntax
In Angular, a _template_ is a chunk of HTML. Use special syntax within a template to build on many of Angular's features. Extend the HTML vocabulary of your applications with special Angular syntax in your templates. For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.
Template
`template` metadata is a property defined within the `@Component` decorator that specifies the HTML template for the component. It allows you to define the structure and layout of the component's view.
Angular Templates
A Template is a form of HTML which tells Angular to go towards another component. To create many Angular features, special syntax within the templates is used.
Testing directives
Directives are classes that add new behavior or modify the existing behavior to the elements in the template. Basically directives are used to manipulate the DOM, for example adding/removing the element from DOM or changing the appearance of the DOM elements.
Testing pipes
An Angular Pipe is a special function that is called from a Component template. Its purpose is to transform a value: You pass a value to the Pipe, the Pipe computes a new value and returns it.
Testing Requests
As for any external dependency, you must mock the HTTP backend so your tests can simulate interaction with a remote server. The `@angular/common/http/testing` library provides tools to capture requests made by the application, make assertions about them, and mock the responses to emulate your backend's behavior.
Testing Services
To ensure your services function as expected, you can write dedicated tests for them. Services are typically the easiest files to unit test. You can instantiate the service within a `beforeEach` block, invoke its methods, and assert the results.
Testing
Testing involves the systematic process of executing code to verify that individual units, components, and complete user flows function as expected. It includes writing automated scripts to validate logic, simulate user interactions, and ensure that changes do not introduce regressions within the application. Developers rely on frameworks like Jasmine and Karma to run these checks, ensuring that each part of the codebase maintains its intended behavior before deployment.
Transformation Operators
Transformation operators are functions that take the data emitted by an observable, change its form or content, and then output the modified values to the next part of the stream. These tools allow you to map, project, or group incoming data into new formats before it reaches your components or services. Common examples include `map`, which transforms values using a provided function, and `mergeMap`, which flattens multiple observables into a single stream.
Transitions & Triggers
In Angular, transition states can be defined explicitly through the `state()` function, or using the predefined `*` wildcard and `void` states. An asterisk `*` or wildcard matches any animation state. This is useful for defining transitions that apply regardless of the HTML element's start or end state. Use the `void` state to configure transitions for an element that is entering or leaving a page.
Translation Files
After you prepare a component for translation, use the `extract-i18n` Angular CLI command to extract the marked text in the component into a source language file. The marked text includes text marked with `i18n`, attributes marked with `i18n`\-attribute, and text tagged with `$localize`. The `extract-i18n` command creates a source language file named `messages.xlf` in the root directory of your project. If you have multiple language files, add the locale to the file name, like `messages.{locale}.xlf`.
Trusting Safe Values
Sometimes applications genuinely need to include executable code, display an `<iframe>` from some URL, or construct potentially dangerous URLs. To prevent automatic sanitization in these situations, tell Angular that you inspected a value, checked how it was created, and made sure it is secure. Do be careful. If you trust a value that might be malicious, you are introducing a security vulnerability into your application. If in doubt, find a professional security reviewer.
Two-way Binding
Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components. Angular's two-way binding syntax is a combination of square brackets and parentheses, `[()]`, commonly known as `banana in a box`.
Typed Forms
Since Angular 14, reactive forms are strictly typed by default. You don't have to define extra custom types or add a ton of type annotations to your form declarations to benefit from this extra type safety, as Angular will infer types from the default value of a form control. Non-typed forms are still supported. To use them, you must import the `Untyped` symbols from `@angular/forms`.
UI Components
The Angular Material library, which is maintained by the Angular team, is a suite of reusable UI components that aims to be fully accessible. The Component Development Kit (CDK) includes the a11y package that provides tools to support various areas of accessibility.
Binding
Binding is a mechanism that creates a live connection between the application logic in a component and the user interface displayed in the DOM. It allows data to flow between the TypeScript code and the HTML template, ensuring that the view automatically updates whenever the underlying data changes. Through various syntax forms like interpolation, property binding, and event binding, developers can display dynamic values, modify HTML attributes, and respond to user inputs effectively.
Using Libraries
Libraries are collections of pre-written code, functions, or modules that developers integrate into their projects to perform specific tasks without having to build the functionality from scratch. These resources provide reusable components, utilities, or services that help streamline the development process and maintain consistent project standards. Developers install these packages using tools like npm or yarn, importing the necessary files to extend the capabilities of their applications while reducing the amount of custom code they need to maintain.
ViewChild
ViewChild is a decorator that allows a component to gain direct access to a child component, directive, or a DOM element within its own template. By using this tool, you can reference specific elements from the HTML and interact with their properties or methods directly from the TypeScript class. It is commonly used to trigger functions on a child component or to manipulate native elements, such as input fields or canvas tags, that are otherwise not easily reachable through standard data binding.
viewProviders
viewProviders is a configuration property used within a component's decorator to define a set of injectable dependencies that are available only to that component and its child components. When services are declared here, they are restricted to the component's shadow DOM and any components nested within its template, effectively scoping the dependency injection container. This allows for the creation of encapsulated services that are hidden from the parent component and other parts of the application outside of that specific component tree.
Writing Interceptors
Interceptors are middleware that allows common patterns around retrying, caching, logging, and authentication to be abstracted away from individual requests.
XSRF Protection
Cross-Site Request Forgery (XSRF or CSRF) protection is a critical security measure designed to prevent a type of malicious exploit where an attacker tricks a web browser into sending an unauthorized request to a trusted site on behalf of a logged-in user. Unlike phishing, which tries to steal credentials, XSRF exploits a user's active session.
Zone Pollution
`Zone.js` is a signaling mechanism that Angular uses to detect when an application state might have changed. In some cases, scheduled tasks or microtasks don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are `requestAnimationFrame`, `setTimeout` and `setInterval`. You can identify change detection with Angular DevTools, and you can run code outside the Angular zone to avoid unnecessary change detection calls.
Zoneless Applications
Angular 18 introduced an experimental feature called zoneless change detection. This technology removes the need for `Zone.js`, a library that was previously used for change detection in Angular from the beginning. By eliminating `Zone.js`, Angular applications can have faster initial renders, smaller bundle sizes, and simpler debugging.
Zones
Zone.js is a signaling mechanism that Angular uses to detect when an application state might have changed. It captures asynchronous operations like setTimeout, network requests, and event listeners. Angular schedules change detection based on signals from Zone.js.