Welcome to ONLC Training Centers

Web Development with Bootstrap 4 and Angular 2 Course Outline

 (4 days)
Two of the most popular frontend frameworks, Angular and Bootstrap, have undergone a major overhaul to embrace emerging web technologies so that developers can build cutting-edge web applications.

During this class, you'll dive, fingers first, into the basics of both the tools, and once you're familiar with them, you'll move onto Bootstrap's new grid system and Angular's built-in directives. You'll then learn how to format output using Angular's
pipes and how to make use of the built-in router to set up routes for all your components.

Webpack will be your buddy to wrap up your project. Then, after throwing in some SASS to make things pretty, you'll learn how to validate the forms you've built and debug your application. Finally, you'll go on to learn how to obtain smooth transitioning
from Bootstrap to Angular and then how to hook up with a server and use Firebase as the persistence layer.

Once you're done with this class, you'll not only have a lovely little e-commerce application running, but you'll also take with you the confidence to innovate and build your own applications with ease.

What You Will Learn
Develop Angular 2 single page applications using an ecosystem of helper tools
Get familiar with Bootstrap’s new grid and helper classes
Embrace TypeScript and ECMAScript 2015 to write more maintainable code
Use custom directives for Bootstrap 4 with the ng2-bootstrap library
Understand the component-oriented structure of Angular 2 and its Router
Make use of the built-in HTTP library to work with API endpoints
Use Observables and Streams to manage the app’s data and state
Combine Angular 2 and Bootstrap 4 along with Firebase in the development of a solid example

Course Outline

1: Saying Hello!
Setting up a development environment
A TypeScript crash course
What are promises?
Angular 2 concepts
SystemJS loader and JSPM package manager
Writing your first application
Creating and bootstrapping an Angular component
Integrating Bootstrap 4

2: Working with Bootstrap Components
Bootstrap 4
Introduction to Sass
Example project
Designing layouts with grids and containers
Using images
Using Cards
Using buttons

3: Advanced Bootstrap Components and Customization
How to capture a customer's attention
Products page layout

4: Creating the Template
Diving deeper into Angular 2
Welcome page analysis
Application structure
Navigation component
Template expressions
Template statements
Data binding
Built-in directives
Structural directives
Category product component

5: Routing
Modern web applications
The router configuration
Redirecting routes
Router outlet
Router links
Product card
Products grid component
Router change events
Routing strategies

6: Dependency Injection
What is dependency injection?
A real-life example
Dependency injection
The hierarchy of injectors
Category service
The shopping cart

7: Working with Forms
HTML form
Bootstrap forms
Formless search
Product View
Angular 2 forms
Cart view
The Checkout View

8: Advanced Components
The directive lifecycle
The Angular lifecycle hooks
Change detection and rendering
Content projection (only for components)
After view (only for components)
Parent to child communications

9: Communication and Data Persistence
Client to server communication
The HttpModule
The in-memory Web API
The HTTP client
The HTTP Promises
RxJS library
Observables versus promises
Observables in search-by-title
Introduction to Firebase
Connecting to Firebase
Deploying the application to Firebase

10: Advanced Angular Techniques
Webpack migration
Preparing our project for production
User authentication
Adding authentication in the application
Enabling authentication provider
AngularFirebase2 authentication
The ng2-bootstrap
Angular CLI
Just-in-time compilation
AOT compilation
View outline in Word


Attend hands-on, instructor-led Web Development with Bootstrap 4 and Angular 2 training classes at ONLC's more than 300 locations. Not near one of our locations? Attend these same live classes from your home/office PC via our Remote Classroom Instruction (RCI) technology.

For additional training options, check out our list of Courses and select the one that's right for you.

Microsoft Gold Partner
Need a price quote?

Follow the link to our self-service price quote form to generate an email with a price quote.

Email Alert

Receive an email when this class is available as "Ready to Run" or "Early Notice" status.

Train from your home or office

If you have high-speed internet and a computer you can likely take this class from your home or office.

Need a class for a group?

We can deliver this class for a private group at your location. Follow the link to request more information.

Attend computer classes from ONLC Training Centers Request a copy via mail


Class Format
Class Policies
Student Reviews

Bookmark and Share

First Name

Last Name