Skip to main content

Bootstrap 4 components, powered by Angular


1: Installing Bootsrap

Next, we need to install Bootstrap. Change the directory to the project we created (cd angular-bootstrap-example) and execute the following command:

For Bootstrap 3:
npm install bootstrap --save
For Bootstrap 4 (currently in beta):
npm install bootstrap@next --save

2: Importing the CSS

We have two options to import the CSS from Bootstrap that was installed from NPM:
1: Configure .angular-cli.json:
"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.scss"
]
2: Import directly in src/style.css or src/style.scss:
@import '~bootstrap/dist/css/bootstrap.min.css';
I personally prefer to import all my styles in src/style.css since it’s been declared in .angular-cli.json already.

3: Using Bootstrap with ng-bootstrap (Bootstrap v4)

There is also a second option to use Bootstrap JavaScript components in Angular without JQuery in case you are using Bootstrap 4: ng-bootstrap.
You can install ng-bootstrap in your project from NPM:
npm install --save @ng-bootstrap/ng-bootstrap
In your app.module.ts you need to import the NgbModule.forRoot() using the forRoot() method.
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [ NgbModule.forRoot(), ... ],  
  // ...
})
export class AppModule {}
Setup bootstrap Here : https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Use the bootstrap component here: https://ng-bootstrap.github.io/#/getting-started

Comments

Post a Comment

Popular posts from this blog

Flash Tool Error Codes -MTK Chipset

Complete List of SP Flash Tool Error Codes and their Meanings and Solutions MTK Chipset. . How to Fix SP Flash Tool Errors (BROM Error Codes): SP Flash Tool Failed to enumerate COM Port This error clearly means that the Flash Tool has issues finding the COM port on which your device is connected. Solution: Connect your watch to other Port and make sure you have USB Drivers installed. Open “Device Manager” and find the COM Port of the device you connected. Once found, open Flash Tool, click on Options -> COM Port -> Select the COM Port on which you have connected your device. Device automatically disconnects during flashing Meaning: Device disconnects as soon as the flashing process begins, interrupting the process. Solution: Try a different USB Cord, USB Port & PC Hold the Volume down or up button while connecting the device to PC for flashing SP Flash Tool remains at 0% Solution: Install necessary MediaTek VCOM drivers on PC. Use the latest version of S...
Post a Comment
Selanjutnya »

HTML : Property vs Attribute

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties. For instance, this HTML element: <input type = "text" value = "Name:" > has 2 attributes. Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc. For a given DOM node object, properties are the properties of that object, and attributes are the elements of the  attributes  property of that object. When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it's not a one-to-one relationship. For instance, for this HTML element:...
Post a Comment
Selanjutnya »