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 Here
             
        
        
            

                Web 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 Here
             
        
        
            
 
                A Computer Science portal for geeks.
                It contains well-written, well thought 
                and well explained computer science and 
                programming articles. 
            
            
                  Click Here
            
        
        
            

                The 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 --version

ứng dụng. thành phần. css

CSS

npm -V OR npm --version

ứng dụng. mô-đun. ts

Javascript

npm -V OR npm --version

đầ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

Sự khác biệt giữa bootstrap và ngx là gì

có ngx không

Cách sử dụng ngx

Tại sao sử dụng ngx