Ngx-bootstrap góc 14

Trong suốt hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng bootstrap 4 với Angular 14 (và bất kỳ phiên bản nào trước đó như Angular 10/9) để làm cho ứng dụng Angular của bạn phản hồi nhanh

Chúng ta sẽ tìm hiểu cách cài đặt (và gỡ cài đặt) bootstrap trong Angular từ npm, cdn hoặc sử dụng sơ đồ ng add và thêm bootstrap vào mảng style/scripts của angular. tập tin json. Tiếp theo, chúng ta sẽ tìm hiểu cách xây dựng giao diện người dùng với nhiều thành phần khác nhau như thanh điều hướng, lưới, bộ chọn ngày và giờ, chú giải công cụ, băng chuyền, phương thức, tab, danh sách thả xuống và biểu mẫu

Chúng ta cũng sẽ thấy những ưu điểm của việc triển khai Angular cho Bootstrap - ng-bootstrap so với ngx-bootstrap so với mdbootstrap. Và xem một số mẫu Angular Bootstrap phổ biến mà bạn có thể sử dụng với Angular để nhanh chóng tạo bố cục của mình

Hơn 3 cách để thêm Bootstrap 4 vào Angular 14

Thêm hoạt ảnh vào Lịch

Thêm hoạt ảnh trong Lịch góc thật thoải mái với ngx-bootstrap. Thêm mã HTML sau vào mẫu góc cạnh của bạn

$ ng new angular-bootstrap-examples

Để bật hoạt ảnh trong Lịch, chúng tôi liên kết thẻ bsConfig, đặt giá trị isAnimated thành true trong trường nhập HTML

Bộ chọn phạm vi ngày 10 góc trong Lịch

Tích hợp Bộ chọn phạm vi ngày trong Lịch được bật bằng cách chỉ cần thêm lệnh bsDaterangepicker vào trường nhập HTML của bộ chọn ngày

$ ng new angular-bootstrap-examples

Bạn có thể thấy mẫu Lịch sẽ bật lên với hai chế độ xem lịch, tại đây bạn có thể đặt ngày giữa hai phạm vi

Ẩn giao diện người dùng lịch Datepicker trên Scroll

Trong bước này, tôi sẽ cho bạn biết làm thế nào bạn có thể dễ dàng ẩn Giao diện người dùng Lịch Datepicker khi người dùng cuộn, thông thường hộp bật lên lịch vẫn hiển thị khi người dùng cuộn

Giao diện người dùng công cụ hẹn hò có vẻ hơi khó xử, hãy thêm đoạn mã sau vào mẫu của bạn và nó chắc chắn sẽ khắc phục sự cố ẩn khi cuộn

$ ng new angular-bootstrap-examples

Mã đi đến góc. thành phần. tập tin ts

$ ng new angular-bootstrap-examples

Nhập API HostListener, ViewChild và BsDatepickerDirective ở đầu thành phần góc cạnh của bạn

Chỉ thị @ViewChild() truy cập các thuộc tính của bộ chọn ngày, liên kết sự kiện cuộn với sự kiện cuộn HostListener để gọi sự kiện này. bảng chọn ngày. hide() để ẩn lịch trên cuộn

Đặt ngày tối thiểu và tối đa trong Datepicker

Bây giờ, chúng ta sẽ tìm hiểu cách dễ dàng để thiết lập phạm vi ngày tối thiểu và tối đa trong lịch DatePicker góc

Trường đầu vào yêu cầu thêm thuộc tính minDate và maxDate. Kiểm tra ví dụ dưới đây, nơi chúng tôi đang sử dụng

$ ng new angular-bootstrap-examples

$ ng new angular-bootstrap-examples

$ ng new angular-bootstrap-examples

Thêm đoạn mã sau vào mẫu Angular TypeScript

$ ng new angular-bootstrap-examples

DatePicker với hình thức phản ứng góc

Như chúng ta đã biết, DatePicker là một thành phần biểu mẫu và việc đặt dữ liệu hợp lệ trong đối tượng biểu mẫu luôn là một cách thực hành tốt

Các biểu mẫu phản ứng cung cấp cách tiếp cận dựa trên mô hình để xử lý các đầu vào biểu mẫu có giá trị thay đổi theo thời gian. Hướng dẫn này chỉ cho bạn cách tạo và cập nhật một điều khiển biểu mẫu đơn giản, tiến tới sử dụng nhiều điều khiển trong một nhóm, xác thực giá trị biểu mẫu và triển khai các biểu mẫu nâng cao hơn

Biểu mẫu phản ứng sử dụng cách tiếp cận rõ ràng và không thay đổi để quản lý trạng thái của biểu mẫu tại một thời điểm nhất định. Mỗi thay đổi đối với trạng thái biểu mẫu trả về một trạng thái mới, duy trì tính toàn vẹn của mô hình giữa các thay đổi

Để biết thêm về các hình thức Phản ứng, hãy xem hướng dẫn gần đây của tôi về

Hoàn thành xác thực Biểu mẫu với Biểu mẫu phản ứng góc

Xác thực mẫu phản ứng với vật liệu góc

Để biết thêm chi tiết về các hình thức phản ứng, hãy kiểm tra. https. // góc cạnh. io/guide/reactive-forms

Trong ví dụ này, chúng ta sẽ tìm hiểu cách thiết lập DatePicker với Angular Reactive Forms

Để bắt đầu, chúng ta cần nhập ReactiveFormsModule trong tệp chính

$ ng new angular-bootstrap-examples

$ ng new angular-bootstrap-examples

FormGroup xác định sử dụng formGroupName cho biểu mẫu;

Khai báo formControlName trong thành phần DatePicker để giao tiếp với Biểu mẫu phản ứng

$ ng new angular-bootstrap-examples

Sự kết luận

Cuối cùng, chúng ta đã hoàn thành hướng dẫn về Lịch góc, Trong hướng dẫn này, chúng ta đã học cách thêm ngx-bootstrap và plugin datepicker cũng như cách sử dụng nhiều mô-đun Lịch trong ứng dụng Góc

Chúng tôi cũng đã học cách thêm lịch đơn giản và nâng cao trong ứng dụng Angular

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Bài viết đề xuất

Hướng dẫn Angular 14 Liên kết Chọn phần tử cho đối tượng Hướng dẫn Angular 14 Chụp ảnh từ Webcam hệ thống Cách tạo phân trang phía máy chủ trong ứng dụng Angular 14 Cách hiển thị Ẩn Div trên nút Radio Nhấp vào Angular 14 Angular 14 Hướng dẫn phát hiện chiều rộng và chiều cao của màn hình Hướng dẫn Angular 14 Reactive Forms White / Empty Spaces

có ngx không

Làm cách nào để thêm bootstrap vào Angular 14?

Cách sử dụng ngx

Làm thế nào để cài đặt ngx