Giới thiệu
hocvietcode.com là website chia sẻ và cập nhật tin tức công nghệ, chia sẻ kiến thức, kỹ năng. Chúng tôi rất cảm ơn và mong muốn nhận được nhiều phản hồi để có thể phục vụ quý bạn đọc tốt hơn !
Liên hệ quảng cáo: trienkhaiweb@gmail.com
RxJS Transformation Operators trong RxJS
Pipeable Operators trong Angular Các Pipeable Operator trong Angular là những hàm nhận một Observable và trả về một Observable khác mà không làm thay đổi Observable ban đầu. Chúng hoạt động theo cơ chế pure: Observable đầu vào không bị ảnh hưởng. Cấu trúc sử dụng của chúng như sau: Dù có bao nhiêu […]
RxJS Creation Operators trong RxJS
RxJS Creation Operators là các công cụ mạnh mẽ trong RxJS giúp tạo Observable một cách dễ dàng và linh hoạt hơn so với việc tạo bằng tay. Trong bài trước, chúng ta đã thấy cách tạo một Observable thủ công bằng cách sử dụng constructor. Nhưng liệu có cách nào khác không? Đây chính […]
Giới thiệu Reactive Programming, RxJS và Observable
Observable trong Angular Trong lập trình thông thường, chúng ta thường sử dụng Array để lưu trữ nhiều phần tử. Ví dụ như trong JavaScript, chúng ta có thể sử dụng các phương thức như map, filter, reduce, every, some để thao tác với Array một cách linh hoạt. Tuy nhiên, trong thế giới lập […]
Pipe trong Angular
Pipes là gì? Pipe trong Angular là như một công cụ linh hoạt, giúp chúng ta chuyển đổi dữ liệu từ dạng này sang dạng khác một cách dễ dàng. Nó tương tự như một function nhận đầu vào và trả về một kết quả sau khi xử lý. Ví dụ, khi chúng ta nhận […]
ContentChild & ContentChildren trong Angular
Query single directive/component trong Angular Chúng ta đã xem xét việc sử dụng Tab Component cùng với một component Counter để đếm số lượng component được khởi tạo. Bất ngờ thay, trong ví dụ dưới đây: Chúng ta hy vọng chỉ có một instance của counter, nhưng thực tế lại có đến 4 instances, chỉ […]
Dependency Injection trong Ứng Dụng Angular
Inject component cha đến component con Angular application là một component tree có dạng như sau: Angular hỗ trợ Dependency Injection (DI) tới mức độ của từng Component, cho phép chúng ta inject một Component cha vào một Component con. Điều này rất hữu ích khi chúng ta xây dựng một tính năng như Tabs […]
Giới thiệu Dependency Injection trong Angular
Dependency Injection là gì? Dependency Injection là một cách để tổ chức và quản lý các phần của một chương trình. Nó giúp chương trình linh hoạt hơn bằng cách cho phép chèn các thành phần cần thiết vào trong chương trình một cách dễ dàng. Bạn có thể nghĩ về nó như cách bạn […]
ngTemplateOutlet trong Angular
ng-template trong Angular ng-template trong Angular là một công cụ mạnh mẽ cho phép chúng ta xác định mẫu hoặc dạng của một đoạn mã HTML mà không render ngay lập tức trên giao diện người dùng. Khi bạn bao bọc đoạn mã HTML bằng ng-template, nó không được hiển thị ngay lập tức khi […]
Content Projection trong Angular
Làm thế nào để sử dụng ng-content? Bây giờ, hãy nghĩ về cách tận dụng sức mạnh của ng-content trong Angular. Giả sử chúng ta có một component Toggle – một công cụ mà chúng ta muốn tái sử dụng để thu thập ý kiến từ người dùng. Cụ thể, chúng ta muốn đặt các […]
Một số kỹ thuật TypeScript Nâng Cao
Union Type là gì? Union Type trong TypeScript cho phép bạn định nghĩa các kiểu dữ liệu có tính chất “HOẶC”. Đây là cách để chỉ định rằng một biến có thể mang một trong các kiểu dữ liệu đã được định nghĩa. Để tạo Union Type, chúng ta sử dụng ký hiệu “Pipe Symbol” […]
Typescript trong Angular
TypeScript là gì? TypeScript (TS) là một ngôn ngữ lập trình mở rộng từ JavaScript (JS). Khi bạn tích hợp TypeScript vào dự án của mình, bạn có quyền truy cập vào một Command Line Interface (CLI) được gọi là TypeScript Compiler (tsc). Nhiệm vụ chính của TypeScript Compiler là biên dịch mã nguồn viết […]
Template Variable và ViewChild/ViewChildren trong Angular
Các phần tử cha tương tác với phần tử con thông qua biến cục bộ Để tương tác giữa một phần tử con và phần tử cha trong Angular, chúng ta có thể sử dụng biến cục bộ (Template variable) để truy cập các phương thức và thuộc tính của component con từ component cha. […]
Two-way binding trong Angular
Giới thiệu lại ngModel NgModel là một directive trong Angular, nó giúp chúng ta thực hiện Two-way binding, tức là kết nối giữa dữ liệu và giao diện người dùng. Để sử dụng NgModel, trước hết chúng ta cần import FormsModule vào NgModule mà quản lý component của chúng ta. Nói một cách đơn giản, […]
Event trong Component
Đầu tiên, khi làm việc với Angular, chúng ta cần tạo ra các component để hiển thị dữ liệu. Ví dụ, chúng ta muốn có hai component là Author List Component (danh sách tác giả) và Author Detail Component (chi tiết tác giả). Để tạo chúng, chúng ta có thể sử dụng lệnh sau: Author […]
Truyền dữ liệu giữa các Component
Chúng ta cần tạo một component mà nó có thể nhận vào các properties. Chúng ta sẽ dùng lệnh để generate 1 component tên là progress-bar như đã học ở bài trước đó. Đoạn mã dưới đây sẽ giúp bạn tạo ra một component: Như vậy, chúng ta đã có một component để bắt đầu. […]
Binding trong Angular
Trong Angular, khi cần thay đổi các class của một phần tử dựa trên một điều kiện nào đó, chúng ta sử dụng class binding. Điều này cho phép chúng ta thêm hoặc xóa các class dựa trên giá trị của một biểu thức. Ví dụ, nếu muốn thêm class tab-active khi một tab được […]
Cấu trúc NgFor trong Angular
NgForOf (hay NgFor) trong Angular giúp hiển thị danh sách các phần tử từ một mảng ra ngoài template một cách dễ dàng. Cấu trúc của NgForOf giống với cú pháp của vòng lặp for...of trong TypeScript. Giả sử chúng ta có một danh sách các tác giả của các cuốn sách trong một ứng […]
Cấu trúc if-else trong Angular
Để hiển thị một phần view (template) dựa trên một điều kiện, chúng ta sử dụng directive *ngIf trong Angular. Cú pháp *ngIf="expression" giúp chúng ta kiểm soát việc hiển thị hoặc ẩn một phần của template tùy thuộc vào giá trị của biểu thức expression. Dưới đây là ví dụ mô tả cách sử […]
Data Binding trong Angular
Data Binding trong Angular là khả năng liên kết dữ liệu giữa thành phần TypeScript (TS) và template để hiển thị thông tin cho người dùng. Trong Angular, một component được tạo ra từ một class TypeScript và đi kèm với một decorator để định nghĩa template. Có nhiều cách để hiển thị dữ liệu […]
Tìm hiểu Angular App: Tạo Component Mới
Bắt đầu khám phá Angular App từ dự án được tạo bởi Angular CLI, bạn sẽ được dẫn đến một thế giới gồm nhiều file và thư mục. Vậy, ứng dụng của bạn bắt đầu từ đâu? Đầu tiên, điểm khởi đầu là thư mục “src”, nơi bạn có thể tìm thấy tập tin “index.html”. […]
