jonyfs/angular-bootstrap4

A angular 5 and bootstrap 4 Example

AngularBootstrap4 - A angular 5 and bootstrap 4 Example

Reference: https://medium.com/codingthesmartway-com-blog/building-an-angular-5-project-with-bootstrap-4-and-firebase-4504ff7717c1

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.

Furthermore we’d like to include the navigation bar from the starter template as well. We do that by first adding a new component to out application by using Angular CLI again:

$ 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

• Home (current)
• Link
• Disabled
• Dropdown
  Action Another action Something else here

Search

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.

Finally some CSS code needs to be added to styles.css

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: