Angular ngx Bootstrap là một dự án độc lập nguồn mở cung cấp các thành phần Bootstrap được cung cấp bởi Angular. Về cơ bản, nó là một khung bootstrap được sử dụng với góc cạnh để tạo các thành phần có kiểu dáng tuyệt vời và khung này rất dễ sử dụng và được sử dụng để tạo các trang web phản hồi. Với sự trợ giúp của ngx Bootstrap, chúng ta có thể tạo một ứng dụng web tương tác giúp nâng cao khả năng tương tác tổng thể của ứng dụng web
Để sử dụng ngx Bootstrap trong dự án Angular, chúng ta có thể triển khai một trong hai kỹ thuật để cài đặt
- Cài đặt bằng Angular CLI
- Cài đặt bằng cách thủ công với npm
Chúng tôi sẽ hiểu cả hai quy trình cài đặt, cùng với việc biết cách triển khai chúng thông qua các ví dụ
Cài đặt bằng cách thủ công thông qua npm. Trước khi tiến hành cài đặt Angular ngx Bootstrap, chúng ta phải cài đặt Angular CLI trong hệ thống. Vui lòng tham khảo bài viết Thiết lập dự án góc Angular CLI để biết quy trình cài đặt chi tiết
Đảm bảo rằng Trình quản lý gói nút và CLI góc được cài đặt đúng cách. Để kiểm tra phiên bản đã cài đặt, hãy chạy các lệnh bên dưới
- Đối với phiên bản NodeJS
node --version
- Đối với phiên bản NPM
npm -V OR npm --version
- Đối với phiên bản CLI góc
ng -V or ng --version
Chúng tôi sẽ làm theo các bước dưới đây để cài đặt Angular ngx Bootstrap
Bước 1. Cú pháp cài đặt. Chạy lệnh bên dưới để cài đặt ngx Bootstrap
npm install ngx-bootstrap --save
Bước 2. Sau khi cài đặt thành công, hãy thêm gói cần thiết vào NgModule nhập trong ứng dụng. mô-đun. tệp ts, như được đưa ra dưới đây
import { AccordionModule } from 'ngx-bootstrap/accordion'; @NgModule[{ ... imports: [ AccordionModule.forRoot[], … ] ... }]
Step 3: Add the following tag in index.html file:
Bước 4. Thêm thành phần trong ứng dụng. thành phần. tệp html
Text
Bước 5. Chạy ứng dụng bằng lệnh sau
ng serve
Nó sẽ kết xuất ứng dụng thành http. //máy chủ cục bộ. 4200/ trong trình duyệt
Cài đặt bằng Angular CLI
Chúng ta có thể trực tiếp thêm Bootstrap vào dự án Angular bằng lệnh ng add sẽ cập nhật mô-đun Bootstrap trong dự án
ng add ngx-bootstrap
Cấu trúc dự án. Sau khi cài đặt thành công, dự án sẽ chứa các mô-đun & thành phần sau
Cấu trúc dự án
Ví dụ. Ví dụ này minh họa việc triển khai Angular ngx Bootstrap trong dự án Angular
mục lục. html
HTML
________số 8
ứng dụng. thành phần. html
HTML
GeeksforGeeks
Angular ngx Bootstrap
The one-stop solution is GeeksforGeeks DSA Self-Paced Course with Lifetime Access is a complete package for you to learn and master all the concepts.
Click HereWeb Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet.
Click HereA Computer Science portal for geeks. It contains well-written, well thought and well explained computer science and programming articles.
Click HereThe placement session for any company generally has 3 – 4 rounds. The first round is the written test, consisting of quantitative aptitude.
Click Here
ứng dụng. thành phần. ts
Javascript
npm -V OR npm --version0
ứng dụng. thành phần. css
CSS
npm -V OR npm --version1
ứng dụng. mô-đun. ts
Javascript
npm -V OR npm --version2
đầu ra
Vui lòng viết bình luận nếu bạn thấy bất cứ điều gì không chính xác hoặc bạn muốn chia sẻ thêm thông tin về chủ đề thảo luận ở trên