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-examples8Để 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-examples9Bạ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-examples10Mã đi đến góc. thành phần. tập tin ts
$ ng new angular-bootstrap-examples11Nhậ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-examples16 để khai báo các ngày trước đó và $ ng new angular-bootstrap-examples17 cho các ngày hiện tại và tương lai trong 10 ngày sắp tới
$ ng new angular-bootstrap-examples12Thêm đoạn mã sau vào mẫu Angular TypeScript
$ ng new angular-bootstrap-examples13DatePicker 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-examples18. Đồng thời nhập FormGroup, FormControl trong tệp thành phần ứng dụng
$ ng new angular-bootstrap-examples14FormGroup 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-examples15Sự 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
Twitter GitHubBà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