AngularBootstrap4 - A angular 5 and bootstrap 4 Example
This project was generated with Angular CLI version 1.6.2.
Development server
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Code scaffolding
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Build
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.
Running unit tests
Run ng test to execute the unit tests via Karma.
Running end-to-end tests
Run ng e2e to execute the end-to-end tests via Protractor.
Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
Initiate the project
npm install -g @angular/cli@latest
ng new project-name --skip-install
cd project-name
npm install
Adding Bootstrap 4
npm install --save bootstrap@next
We need to add @next to the package name because at the time of writing this post Bootstrap 4 is still in beta. The @next addition makes sure that version 4 of Bootstrap is installed, not version 3.
The NPM command installs Bootstrap 4 into the folder node_modules/bootstrap and at the same time makes sure that the dependency is added into the package.json file.
Change styles in .angular-cli.json by "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],
BootStrap Starter Template
To add a Bootstrap user interface to our sample application we’ll make use of the Bootstrap Starter Template which is available at https://getbootstrap.com/docs/4.0/examples/: To setup a basic user interface with Bootstrap elements we’re going to use code from the Bootstrap Starter Template which can be found on the Examples page:
Clicking on the link Starter template opens up the starter template website in a new browser window. To access the HTML markup code of the starter template just open the browser’s source code view.
From the source code view we can copy and paste the needed code parts into our application. First let’s copy the following code from the -section to the template code in app.component.html:
Bootstrap starter template
Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
$ ng g component app-navbar
This command creates a new folder src/app/app-navbar/. Within that folder you’ll find the following four files:
app-navbar.component.html app-navbar.component.ts app-navbar.component.css The component’s template code can be found in file app-navbar.component.html. Delete the default markup code from that file and copy and paste the following code excerpt from the Bootstrap starter template:
Navbar Next, let’s open app-navbar.component.ts and adapt the string value which is assigned to the selector property of the @Component directive from app-app-navbar to app-navbar:@Component({ selector: 'app-navbar', templateUrl: 'app-navbar.component.html', styles: [] }) Now add the element to the template code of AppComponent:
Bootstrap starter template
Use this document as a way to quickly start any new project.
All you get is this text and a mostly barebones HTML document.
body { padding-top: 80px; } .starter-template { padding: 3rem 1.5rem; text-align: center; } The result of the application in the browser should now comply with the Bootstrap starter template’ output: