In case you’ve already tried building a web application with Angular 7, it’s time to kick it up a notch. Let’s see how we can integrate Bootstrap CSS styles and JavaScript files with an Angular project generated using the Angular CLI, and how to use form controls and classes to create beautiful forms and how to style HTML tables using Table styles.
For the Angular part, we’ll be creating a simple client-side application for creating and listing contacts. Each contact has an ID, name, email, and description, and we’ll be using a simple data service that stores the contacts in a TypeScript array. You can use an advanced in-memory API instead. (Check out “A Complete Guide To Routing In Angular”.)
Note: You can get the source code of this tutorial from this GitHub repository and see the live example over here.
Requirements
Before we start creating the demo application, let’s see the requirements needed for this tutorial.
Basically, you will need the following:
Node.js and NPM installed (you can simply head on over to the official website and download the binaries for your system),
Familiarity with TypeScript,
Working experience of Angular,
Basic knowledge of CSS and HTML.
Installing Angular CLI
Let’s start by installing the latest version of Angular CLI. In your terminal, run the following command:
$ npm install -g @angular/cli
At the time writing, v7.0.3 of Angular CLI is installed. If you have the CLI already installed, you can make sure you have the latest version by using this command:
$ ng --version
Creating A Project
Once you have Angular CLI installed, let’s use it to generate an Angular 7 project by running the following command:
$ ng new angular-bootstrap-demo
The CLI will then ask you:
Would you like to add Angular routing?
Press Y. Next, it will ask you:
Which stylesheet format would you like to use?
Choose “CSS”.
Adding Bootstrap
After creating the project, you need to install Bootstrap 4 and integrate it with your Angular project.
First, navigate inside your project’s root folder:
$ cd angular-bootstrap-demo
Next, install Bootstrap 4 and jQuery from npm:
$ npm install --save bootstrap jquery
(In this case, bootstrap v4.2.1 and jquery v3.3.1 are installed.)
Finally, open the angular.json file and add the file paths of Bootstrap CSS and JS files as well as jQuery to the styles and scripts arrays under the build target:
After creating a project and adding Bootstrap 4, we’ll create an Angular service that will be used to provide some demo data to display in our application.
In your terminal, run the following command to generate a service:
$ ng generate service data
This will create two src/app/data.service.spec.ts and src/app/data.service.ts files.
Open src/app/data.service.ts and replace its contents with the following:
We add a contacts array with some demo contacts, a getContacts() method which returns the contacts and a createContact() which append a new contact to the contacts array.
Adding Components
After creating the data service, next we need to create some components for our application. In your terminal, run:
$ ng generate component home
$ ng generate component contact-create
$ ng generate component contact-list
Next, we’ll add these components to the routing module to enable navigation in our application. Open the src/app/app-routing.module.ts file and replace its contents with the following:
A navigation bar will be created with Bootstrap 4, and we’ll use the routerLink directive to link to different components.
Use the .navbar, .navbar-expand{-sm|-md|-lg|-xl} and .navbar-dark classes to create Bootstrap navigation bars. (For more information about nav bars, check out Bootstrap’s documentation on “Navbar”.
Next, open the src/app/header/header.component.css file and add:
.nav-item{ padding:2px; margin-left: 7px;
}
Next, open the src/app/footer/footer.component.html file and add:
We’re creating an application shell by using the header and footer components which means that they will be present on every page of our application. The only part that will be changed is what will be inserted in the router outlet (check out “The Application Shell” on the Angular website for more information).
The .jumbotron class is used to create a Bootstrap Jumbotron.
Adding A List Component: Using A Bootstrap Table
Now let’s create a component-to-list data from the data service and use a Bootstrap 4 table to display tabular data.
First, open the src/app/contact-list/contact-list.component.ts file and inject the data service then call the getContacts() method to get data when the component is initialized:
We added two variables contactsand selectedContact which hold the set of contacts and the selected contact. And a selectContact() method which assigns the selected contact to the selectedContact variable.
Open the src/app/contact-list/contact-list.component.html file and add:
#
Name
Email
Actions
{{ contact.id }}
{{ contact.name }}
{{ contact.email }}
# {{selectedContact.id}}
{{selectedContact.name}}
{{selectedContact.description}}
</div>
</div>
We simply loop through the contacts array and display each contact details and a button to select a contact. If the contact is selected, a Bootstrap 4 Card with more information will be displayed.
“A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.”
We use the .table and .table-hover classes to create Bootstrap-styled tables, the .card, .card-block, .card-title and .card-text classes to create cards. (For more information, check out Tables and Cards.)
Adding A Create Component: Using Bootstrap Form Controls And Classes
Let’s now add a form to our contact-create component. First, we need to import the FormsModule in our main application module. Open the src/app/app.module.ts file, import FormsModule from @angular/forms, and add it to the imports array:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms'; /* ... */ @NgModule({ declarations: [ /* ... */ ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }
Next, open the src/app/contact-create/contact-create.component.ts file and replace its contents with the following:
We use the .form-group, .form-control classes to create a Bootstrap-styled form (check out “Forms” for more information).
We use the ngModel directive to bind the form fields to the components’ variable. For data binding to properly work, you need to give each form field a name.
At this step, let’s run the application and see if everything works as expected. Head over to your terminal, make sure you are in the root folder of your project then run the following command:
$ ng serve
A live-reload development server will be running from the http://localhost:4200 address. Open your web browser and navigate to that address. You should see the following interface:
In this tutorial, we’ve seen how to create a simple Angular application with a Bootstrap interface. You can find the complete source code on GitHub and see the live example here.
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy