#angular

Authorization Code + PKCE in .NET 10: Securing Angular, Gateway, and Downstream APIs

Bài viết hướng dẫn triển khai Authorization Code Flow kết hợp PKCE trên kiến trúc doanh nghiệp đa tầng gồm Angular SPA, API Gateway (.NET hoặc Azure APIM) và các API downstream .NET 10. Giải thích vai trò quan trọng của PKCE trong ứng dụng trình duyệt không thể lưu trữ client secrets, cách MSAL xử lý luồng PKCE trong Angular, cơ chế xác thực JWT và quản lý scopes của gateway, cũng như yêu cầu các API downstream phải tự xác thực token thay vì tin tưởng hoàn toàn gateway. Ngoài ra còn đề cập đến xác thực service-to-service bằng confidential clients hoặc managed identities.

Những lập trình viên phát triển ứng dụng Angular và API Gateway trong môi trường doanh nghiệp nên đọc bài này để hiểu cách bảo mật hiệu quả hơn khi sử dụng PKCE trong giao thức Authorization Code, đặc biệt là khi ứng dụng không thể lưu trữ client secret, cũng như cách tối ưu hóa xác thực và quyền hạn trong hệ thống đa tầng.

How to build a static blog in Angular with Scully

Hướng dẫn từng bước xây dựng blog tĩnh bằng Angular kết hợp Scully.

Lập trình viên Angular sẽ tìm hiểu cách tối ưu hóa công cụ tạo blog tĩnh Scully để tiết kiệm thời gian và nguồn lực khi phát triển ứng dụng đơn giản, đồng thời khám phá cách kết hợp Angular với kiến trúc tĩnh để cải thiện hiệu suất và dễ bảo trì.

Build React, Angular, and Vue Applications Faster with Syncfusion CLI

Công cụ Syncfusion CLI hỗ trợ nhanh chóng xây dựng ứng dụng React, Angular và Vue thông qua scaffolding, tích hợp component, quản lý theme, thiết lập MCP và phát triển có trợ lý AI.

Là người phát triển frontend, bạn có thể tiết kiệm thời gian xây dựng và tối ưu hóa ứng dụng React, Angular hay Vue bằng công cụ tự động hóa Syncfusion CLI, giúp giảm thiểu công việc thủ công và tăng hiệu suất phát triển.

A Keyboard-First Admin Shell in Angular: Skip Links, Landmarks, and Focus on Route Change

Admin shell trong Angular ưu tiên thao tác bàn phím với các tính năng như Skip Links, Landmarks và quản lý focus khi thay đổi route, bao gồm khung giao diện chính gồm logo, thanh bên chứa liên kết, thanh trên cùng và khu vực nội dung.

Một lập trình viên Angular nên đọc bài này để học cách thiết kế giao diện admin theo nguyên tắc kiểm soát bằng bàn phím (keyboard-first), giúp cải thiện trải nghiệm người dùng và tuân thủ tiêu chuẩn Accessibility (ADA/WAI-ARIA) từ đầu.

Biometric Authentication in Angular Using Auth0

Learn to build an authentication system that supports passkeys using the Auth0 SDK within an Angular application.

What Enterprise Teams Look for in an Angular UI Library

Một nhóm doanh nghiệp thực tế đã đánh giá các thư viện UI Angular dựa trên tiêu chí nào, và lý do họ tiếp tục sử dụng Kendo UI.

Lập trình viên Angular nên đọc bài này để hiểu rõ những tiêu chí thực tế của các đội ngũ doanh nghiệp trong việc lựa chọn thư viện UI, giúp bạn tránh những sai lầm về hiệu suất, tích hợp và sự phù hợp với quy trình công việc doanh nghiệp.

Angular Dependency Injection Is a Tree Search, Not Magic

Angular Dependency Injection hoạt động như một thuật toán tìm kiếm cây (tree search) thay vì phép thuật. Các nhà phát triển thường sử dụng @Injectable(), cung cấp service và tiêm vào component, nhưng bản chất của quá trình này dựa trên cấu trúc phân cấp.

Để hiểu rõ cách Angular quản lý và tìm kiếm các phụ thuộc một cách logic và hiệu quả, tránh rơi vào những nhầm lẫn về cách hoạt động của DI trong ứng dụng.

ABP.IO Platform 10.6 Final Has Been Released!

Phiên bản ổn định ABP.IO Platform 10.6 đã chính thức ra mắt. Xem bài đăng trên blog để cập nhật những tính năng mới.

Một lập trình viên nên đọc bài này để cập nhật những tính năng mới trong ABP.IO Platform 10.6, giúp tối ưu hóa hiệu suất ứng dụng, cải thiện tính mở rộng và phát triển nhanh hơn với các công cụ hiện đại nhất trong framework này.

Angular 22 Is Officially Signal-First: Here’s Everything That Changed — Here’s What Changes in NG 22 (Part 6)

Angular 22 chính thức chuyển sang mô hình Signal-first, giới thiệu các API mới như resource(), rxResource(), httpResource() nhằm tối ưu quản lý trạng thái và tương tác dữ liệu theo hướng reactive. Những thay đổi này giúp cải thiện hiệu suất và đơn giản hóa việc xử lý bất đồng bộ trong ứng dụng.

Lập trình viên Angular nên đọc bài này để hiểu cách tối ưu hóa quản lý dữ liệu và phản ứng hiệu quả hơn với kiến trúc mới Signal-first, đặc biệt khi áp dụng các công cụ như resource() và trong Angular 22.

Stop Managing Form Submission State by Hand in Angular

Angular 22 giới thiệu Signal Forms giúp quản lý trạng thái gửi biểu mẫu (duplicate submissions, loading state, lỗi validation backend) tự động trong một vòng đời, thay vì phải xử lý thủ công.

Một lập trình viên Angular nên đọc bài này để hiểu cách tự động hóa quản lý trạng thái submit form bằng Signal Forms trong Angular 22, tiết kiệm thời gian và giảm sai sót khi xử lý lỗi, trạng thái loading và các trường hợp nhầm lẫn thủ công.

Building Reusable Component Libraries That Actually Survive Enterprise Scale

Building a reusable component library at enterprise scale requires treating UI as infrastructure. The author shares hard-won lessons from migrating large apps across Angular and React simultaneously. Key principles include layering design tokens at the base as a framework-agnostic source of truth, implementing shared primitives that read from those tokens in both frameworks, and handling cross-framework consistency through either duplicate-and-sync, Web Components, or a shared TypeScript core with thin framework wrappers. Versioning must follow semantic versioning strictly with deprecation windows before removal. Documentation via Storybook is essential for adoption, accessibility should be baked into primitives, and testing should cover unit behavior, visual regression, and automated a11y checks in CI. Success is measured by whether teams reach for the library by default rather than building their own components.

Angular Projects: Book Review

Cuốn sách "Angular Projects" hướng dẫn phát triển ứng dụng hiện đại với Angular, tích hợp AI, SSR và kỹ thuật doanh nghiệp thông qua 10 dự án thực tế.

Nếu bạn đang xây dựng ứng dụng Angular chuyên nghiệp, từ việc áp dụng các kỹ thuật hiện đại như SSR đến phát triển ứng dụng doanh nghiệp với AI tích hợp, bài này sẽ là nguồn tư liệu thực hành trực tiếp giúp bạn nâng cao hiệu quả và kiến thức một cách rõ ràng.

Angular 22 Quietly Replaced XHR -Here’s What Actually Changes For You (Part 5)

Angular 22 đã thay thế XHR bằng Fetch API làm cơ chế mặc định cho HttpClient. Sự thay đổi này ảnh hưởng đến SSR, kiểm thử và các ứng dụng hiện có.

Lập trình viên Angular nên đọc bài vì phiên bản mới này thay đổi cơ sở hạ tầng gọi API từ XHR sang Fetch, ảnh hưởng đến SSR, kiểm thử và các trường hợp sử dụng phổ biến mà bạn cần cập nhật để tránh lỗi và tối ưu hiệu suất ứng dụng.

The 10 Best Angular UI Grids

TL;DR What’s the best Angular grid? For most enterprise Angular applications, Progress Kendo UI for Angular Grid is the strongest all-around choice.

Accessible Charts in Angular: A Chart a Screen Reader Can Actually Read

Biểu đồ là đối tượng khó tiếp cận nhất vì giá trị cốt lõi của nó hoàn toàn dựa trên hình ảnh. Bạn đã chuyển đổi bảng số liệu thành biểu đồ trực quan, nhưng người dùng khiếm thị cần phiên bản có thể đọc được bằng công cụ screen reader.

Lập trình viên nên đọc bài này để hiểu cách chuyển đổi dữ liệu biểu đồ từ hình ảnh trực quan sang thông tin có thể đọc được bằng máy đọc màn hình, giúp người dùng khuyết tật tiếp cận nội dung một cách hiệu quả.

Medium

Chương cuối cùng trong loạt bài về RxJS trong Angular tổng hợp các mẫu thực tế, best practices và những điều quan trọng nhất. Sau 9 chương, bài viết khép lại với những kiến thức thực tế và hữu ích.

Lập trình viên Angular cần đọc bài này để hiểu cách áp dụng RxJS một cách hiệu quả trong ứng dụng thực tế, từ những mẫu mã thực tế đến những nguyên tắc thiết thực giúp tối ưu hóa quản lý dữ liệu và phản ứng của ứng dụng.

Angular Addicts #51: spartan/ui 1.0, A2UI, Signal Debouncing & more

Tháng 6/2026, Angular Addicts #51 giới thiệu thư viện spartan/ui phiên bản 1.0, A2UI, kỹ thuật debouncing signals cùng các tài nguyên Angular đáng chú ý khác.

Lập trình viên Angular nên đọc bài này để khám phá những công cụ và kỹ thuật mới nhất từ tháng 6 năm 2026, giúp nâng cao hiệu suất, tính linh hoạt và khả năng tối ưu hóa ứng dụng của mình ngay từ những giải pháp tiên tiến nhất trong cộng đồng.

Nx 23.1 Is Here: Per-Run Performance Reports, TypeScript 6, and Angular 22

Nx 23.1 bổ sung báo cáo hiệu suất sau mỗi lần chạy, hỗ trợ TypeScript 6, Angular 22, điều hướng bằng chuột trong terminal UI và cấu hình mục tiêu linh hoạt hơn.

Lập trình viên nên đọc bài này để cập nhật về Nx 23.1, công cụ quản lý dự án mở nguồn giúp tối ưu hóa hiệu suất chạy dự án mỗi lần build thông qua báo cáo chi tiết và cải tiến mới như TypeScript 6 và Angular 22.

Async Validation in Angular Signal Forms

Learn how to implement async validation in Angular Signal Forms using the validateHttp function, for example to check whether a username is already taken.

ABP Platform 10.6 RC Has Been Released

ABP Platform 10.6 RC introduces several enhancements: background job workers now support dedicated workers per job type, parallel execution, and optional retention of successful jobs. API definition and proxy generation improves handling of multipart file uploads and non-JSON response types. The Angular UI stack is upgraded to Angular 22. Security fixes address antiforgery token validation in mixed JWT/cookie auth scenarios and prevent OpenIddict client_id from leaking into interactive auth cookies. ABP Commercial adds a UI action to generate access tokens for OpenIddict applications directly from the admin panel. Dependency updates include Microsoft packages to 10.0.9 and Swashbuckle.AspNetCore to 10.2.3.

Getting Started with Angular Signal Forms

Angular 22 stabilizes Signal Forms, a new form paradigm introduced in Angular 21 that combines signal-based reactivity with form handling. Signal Forms use a writable signal as the model and the form() function from @angular/forms/signals to create a FieldTree where every field and its properties (value, dirty, invalid, etc.) are signals. The model and form are kept in two-way data binding sync automatically. Validation is defined via a schema function passed as the second argument to form(), supporting built-in validators (required, email, min, max, minLength, maxLength, pattern) and custom validators. The tutorial walks through creating a login form, binding API data to a form, nested object models, type-safe field trees, and displaying validation errors directly in templates using signal properties.

Angular 22 hostDirectives De-Duplication Explained

Angular 22 introduces host directive de-duplication, fixing a long-standing issue where two directives sharing the same host directive on the same element would throw a duplicate directive error. The post walks through building a copy button with tooltip, press feedback, and clipboard support using the Directive Composition API. It explains why the old behavior broke (Angular saw the same directive matched twice), how Angular 22 merges duplicate host directive instances into one, and the key caveat that input/output aliases must match across all composing directives to avoid conflicting binding errors.

Angular 22 State Management: Signals, SignalStore, or NgRx?

Angular 22 advances the signal-first architecture, reshaping how state management should be approached. Plain Signals handle local component state, NgRx SignalStore suits feature-level state with less boilerplate, and the classic NgRx Store remains best for large event-driven apps with global state. New APIs like Resource (signal-based async data loading) and Signal Forms (reactive form fields as signals) reduce custom RxJS infrastructure. The post covers best practices for SignalStore design, how to integrate Resources and Signal Forms with stores, a clear separation of responsibilities table, and an incremental migration strategy from classic NgRx to SignalStore.

Customizing the ABP Framework: A Developer's Guide to LeptonX Theme Overrides in Angular and the Transition to React UI

A practical guide to customizing the LeptonX theme in ABP Framework Angular projects through two layers: style overriding using CSS custom properties and design tokens, and element overriding using ABP's ReplaceableComponentsService. Covers common issues like the visual branding blink on page load, mobile user profile freeze bug (versions 3.1.x–4.3.1), MIME type CSS loading errors, and the trade-offs of integrating raw theme source code. Also introduces ABP's new React UI direction in version 10.4, which gives developers direct ownership of the presentation layer using Vite, Tailwind CSS, and shadcn/ui instead of compiled layout packages.

Automating Dynamic Prerendering at Halodoc: A Data-Driven Approach to SEO and Faster Page Discovery

Halodoc đã thay thế danh sách thủ công các route Angular được prerender bằng quy trình tự động sử dụng Google Search Console API. Hệ thống chạy cron hàng tuần trên Jenkins truy vấn GSC, lọc theo "Smart Threshold" (top 10 trang mỗi danh mục), cập nhật file TypeScript constants, rồi tự động tạo Merge Request để review trước khi triển khai. Phương pháp này giảm độ trễ từ vài tháng xuống còn 7 ngày, cắt giảm công sức thủ công xuống dưới 5 phút mỗi chu kỳ, đồng thời duy trì thời gian build production ở 70–90 giây.

Lập trình viên nên đọc bài này để hiểu cách xây dựng một pipeline tự động hóa từ dữ liệu thực tế (Google Search Console) để tối ưu hóa SEO và giảm thời gian phản ứng giữa xu hướng tìm kiếm và triển khai ứng dụng, giúp tiết kiệm thời gian và nâng cao hiệu quả công việc.

Unlock runtime insights: Introducing third-party developer tools for Chrome DevTools for agents

Chrome DevTools for agents giờ đây hỗ trợ các công cụ phát triển bên thứ ba, cho phép các framework và thư viện hiển thị trạng thái runtime nội bộ tới trợ lý lập trình AI thông qua API JavaScript dựa trên sự kiện. Các framework lắng nghe sự kiện devtoolstooldiscovery trên đối tượng window và phản hồi bằng ToolGroup định nghĩa các công cụ tùy chỉnh.

Lập trình viên cần đọc bài này để khám phá cách các công cụ debug mới từ các framework như Angular và React có thể mở rộng khả năng phân tích mã thực thời thông qua API JavaScript, giúp AI hỗ trợ phát triển hiệu quả hơn.

Real-Time Angular Gantt Chart with SignalR: Multi-User Project Sync Without Refresh

A step-by-step guide to integrating SignalR with the Syncfusion Angular Gantt Chart for real-time multi-user synchronization. Covers setting up a .NET Core SignalR hub, configuring CORS, installing the SignalR client in Angular, and wiring Gantt chart events (created, actionComplete) to broadcast and receive updates instantly across all connected clients — eliminating polling and stale data in collaborative project timelines.