Ultimate Angular 4 (previously Angular 2) with Bootstrap 4
4.6 (2,045 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11,757 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Ultimate Angular 4 (previously Angular 2) with Bootstrap 4 to your Wishlist.

Add to Wishlist

Ultimate Angular 4 (previously Angular 2) with Bootstrap 4

Go from Zero to Hero with Angular 2 and Angular 4 plus Bootstrap 4 and TypeScript!
4.6 (2,045 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11,757 students enrolled
Created by Jon Bonso
Last updated 7/2017
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 5.5 hours on-demand video
  • 4 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Be a top-notch, highly paid developer with Angular 2 skill on your belt!
  • Setup your local workspace and install much-needed tools for Angular 2 development
  • Learn to create Angular 2 applications with Plunker, Angular-CLI and other different ways
  • Understand and Master the core concepts of Angular 2
  • Build Angular 2 application much faster and more robust
  • Properly use Directives, Components, Services, Routing and many more
  • Integrate Bootstrap 4 UI in our Angular 2 application
  • Learn the basics of TypeScript
  • Receive BIG discounts on my other Udemy courses
View Curriculum
  • You DON'T need a prior knowledge of AngularJS to take this course!
  • Basic HTML

Updated to Angular 4.0+ Final Version! 


Angular is the latest development framework from Google that was just released on September 2016 with the latest 4.0 release version last March 2017. Even though it is new, it is already a sought-after (& highly paid) skill for building scalable, robust and modern cross-platform applications. 

$100,000 is the average annual salary for talented software developers here and you can earn as much as $800 or even $1,000 gross per day if you are on a contract rate basis, and by learning Angular, your chance of having this kind of salary gets much higher!

For Front-End or for Full-stack developers, this course is a must for you to take your career and pay grade, on to the next level! This is also beneficial for Project Managers, Computer Science students, Recruiters or anyone who wants to know and learn the latest technology right now in the ever evolving world of technology.

In Ultimate Angular 4 with Bootstrap 4 & TypeScript course, Jon will take you on a pragmatic, hands-on and fun learning journey to master the Angular framework.

Within minutes, you'll learn how to create Angular 4 applications! We will discuss the basics of the framework and guide you to setup your local development workspace. From properly creating Directives, Components, Services and Routing to actually integrating them to build your application. With Angular CLI, I'll show you how to automate your development process. You will also learn the basics of TypeScript and how to use Bootstrap 4! 

You'll learn how to:

  • Install Node, NPM and other Angular dependencies 
  • Learn and use the official Angular Production Release version!
  • Create Angular archetypes with Angular CLI, QuickStart, Plunker and other methods.
  • Understand the basics of Angular framework.
  • Learn how to create Components, Directives, Pipes, Services and Routing. 
  • Easily generate source and test files with Angular CLI
  • Familiarize yourself with Visual Studio Code IDE
  • Use and Integrate Components, Directives, Pipes, Services and Routing.
  • Understand the concept of NgModule
  • Use the built-in Attribute Directives such as ngStyle and ngClass
  • Use the built-in Structural Directives like ngIf, ngSwitch and ngFor
  • Connect and Consume data from a Web Service using Observable
  • Develop a CRUD (Create, Read, Update, Delete) Application
  • Learn the basic of TypeScript by creating a Class, Interface and Enum
  • Integrate and use Bootstrap 4 in your application.
  • Migrate your old Angular 2 RC version to the final release version
  • . . . and many, many more!

Are you now ready for the next BIG jump of your career and your pay check? 

Come on and let's learn Angular today!

Who is the target audience?
  • Computer Science students who are eager to learn the latest technology from Google: Angular 2
  • Web and UI Developers who wants bring their careers to the next level.
  • Project Managers who are looking for a new framework for their projects.
Compare to Other Bootstrap Courses
Curriculum For This Course
80 Lectures
Course Introduction
4 Lectures 11:16

Welcome to Ultimate Angular 2 Developer with Bootstrap 4 and TypeScript!


House Rules for asking questions in the Q&A section.

Course House Rules

Let's test your understanding about the basics of Angular 2

Angular Basics Quiz
5 questions

Create a working Angular 2 application in just a minute with Plunker:  http://www.plnkr.co

In this lesson, we will learn how to start your own 'Hello World' program with Plunker. This is helpful if you want to immediately run Angular 2 applications without using your own computer.

Preview 05:07
Local Development Setup
9 Lectures 53:27

This is the section overview of the things we will setup for your local development environment

Local Development Environment Overview

Overview of NodeJS runtime environment.

NodeJS Overview

Overview of the NodeJS Package Manager and NPM Registry.

NodeJS Package Manager (NPM) Overview

NodeJS and Node Package Manager (NPM) Installation on Windows

NodeJS and Node Package Manager Installation on your Mac OS.

NodeJS and NPM Installation on MAC

Learn how to update your NodeJS and Node Package Manager versions on your Windows system.

Updating NodeJS and NPM on Windows

Updating NodeJS and NPM on MAC

Learn how to install GIT versioning system on your Windows system.

Installing GIT on Windows

Learn how to install GIT versioning system on your MAC OSX system.

Installing GIT on MAC
Angular 2 Quick Starts and Workspace Setup
7 Lectures 15:16

In this lesson, you will learn how to setup and run the Angular2 QuickStart project. You may clone it here: https://github.com/angular/quickstart

Preview 03:16

Angular CLI ( Command Line Interface) is a helpful tool to automate the setup, creation of configurations files and source components for our Angular 2 application. This lesson will show you how to install Angular CLI on your local computer.

Angular CLI Installation

In this lesson, we will learn how to update the old beta or RC versions of your Angular CLI tool to the latest. 

Updating Your Angular CLI Tool

In this lesson, we will learn how to easily create and run our Angular 2 application using the Angular CLI tool.

Hello World Angular using Angular CLI

There are a lot of IDE (Integrated Development Environment) out there that you can use in developing your Angular 2 application. In this lesson, we will talk about Visual Studio Code IDE and WebStorm. Below are the download links: 

  • Visual Studio Code IDE: https://code.visualstudio.com/
  • WebStorm: https://www.jetbrains.com/webstorm/

Your IDEs for Angular

With all of our dependencies installed, we are now ready to setup our development workspace for Angular 2. In this lesson, we will use the Angular 2 app that was generated by our Angular CLI tool and then using the Visual Studio Code IDE to do some modification.

Angular Workspace Setup

Angular Workspace Setup Quiz
5 questions

Now that you had learned the basic steps to start an Angular 2 application, it is now time to put it in practice!

Exercise 1: Creating your First Angular Application
Angular 2 Core Concepts
2 Lectures 11:24
Angular Core Components

Angular Basics
5 questions

Just like the human body, an Angular 2 application is composed of different parts that does various functions. We will learn here its anatomy such as the configuration, tests and source files.

Anatomy of an Angular Application
Components, Directives, Services, Pipes and Routing
16 Lectures 54:42

Components are the building blocks of our Angular 2 application. In this lesson, we will learn how to manually create a Component and also, by using Angular CLI to auto-generate the actual Component and other associated files.

How to create Components

After we created our Components, it is now time to use it. Follow these steps to learn how to properly use Components on your application.

Using Components

One of the difference between an Attribute & Structural Directive to a Component is that, the Component has both a Controller and a View. The latter is basically the "Template". In this lesson, we will learn more about this and improve the simple template of our Component.


In this lesson, we will create a simple Attribute Directive that adds a highlight style to a DOM element. 

How to create Directives

This lesson will teach you how to use the custom Highlight Directive we created in the previous lesson.

Using Directives

In this lesson, we will create a simple service that will provide us with a list of stocks.

How to create Services

We will now use the new Stock Service that we create in our previous lesson.

Using Services

In this lecture, we will learn the overview of Pipes. 

Pipes Overview

In this lesson, we will create a custom Pipe.

How to create Pipes

In this lesson, we will learn how to use built-in Pipes from Angular 2.

Using Pipes

In this lesson, we will create a simple Routing for our Stocks Component. We will configure our app module to accommodate the routing.

How to create Routing

After creating our Routing, it is now time use it for our Stocks Component. 

Using Routes

Now that we have our Routing component all ready that directs us to our Stocks Component, we can now improve the navigation of our application by using RouterLink.

Adding RouterLink

In this lesson, we will learn more about Angular Module and explore the @NgModule decorator including the properties of our app.module.ts source file. We will also learn how to add our new Components, Services and Directives to our root module. 

Preview 07:00

If-Else NgIf Syntax Directive

In this lecture, we will learn the overview of what Angular Universal really is.

Angular Universal
TypeScript Basics
4 Lectures 05:58

Let's start first with the basic building block: a Class. Here, we will learn how to create a simple TypeScript class with Angular CLI and add its constructor plus a custom method.

TypeScript Class

Basically, an Interface is a description which tells the class (which 'implements' it) the specific methods that it must implement. In this lesson, we will create an Interface with the help of Angular CLI and then add methods in it, which will be implemented by the Bonds class.

TypeScript Interface

After we had created an Interface, it is now time to use it. We will implement the methods defined in our Security interface to our Bonds class.

Using TypeScript Interface

Enumeration, or "Enum" for short,  is a complete, ordered listing of all the items in a collection. You can use this to define a list of values for a collection. We will create an Enum for the various stock markets in the world such as NYSE, NASDAQ and ASX.

TypeScript Enum

TypeScript Basics Quiz

TypeScript Basics
5 questions
Bootstrap 4 Integration
7 Lectures 18:35

What is Bootstrap 4 and what does it do? Where can I get it and how can I use it on my Angular 2 app? In this lesson, we will learn more about Bootstrap 4. 

Preview 01:03

Learn the configuration of integrating Bootstrap 4 to your Angular CLI tool.

Note:  For the newer versions of Bootstrap 4, if you to use NgbModule.forRoot() instead of NgbModule, which is specified in this lecture.

  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]

Integrating Bootstrap 4 to Angular CLI

How to add Bootstrap 4 to Angular

With all of the Bootstrap 4 - Angular 2 plumbing ready, we can now use its various components to our application, such as Alerts, Buttons, Modals and many more -- creating a rich, user-friendly interface for our users.

Adding Bootstrap 4 Components

In this lesson, we will learn how to add a Bootstrap 4 navigation bar, also known as a "menu", to our Angular 2 application. We will also integrate the RouterLink that we created earlier to the new menu. 

Adding and Customizing a Bootstrap 4 Navigation Bar

Creating a Dashboard Page

Customizing Your Dashboard Using Jumbotron

Bootstrap 4 Quiz

Bootstrap 4 Quiz
5 questions
Built-In Directives
5 Lectures 26:40

ngFor is one of the built-in directives of Angular 2, which is used to show a collection of items by looping through each element of that collection.

Structural Directive #1: *ngFor

ngIf is one of the built-in directives of Angular 2, which is used to show or to hide a specific DOM element.

Structural Directive #2: *ngIf

Structural Directive #3: *ngSwitch

ngStyle is a built-in attribute directive from Angular 2, that is used to update the style of our HTML element. Let's look at it in detail here in this lecture.

Attribute Directive #1: ngStyle

Just like ngStyle, we also have another built-in attribute directive from Angular 2 which is called ngClass. We will discuss how we can implement the different types of ngClass via a String, an Array and via an Object.

Attribute Directive #2: ngClass
Angular 2 JSON-Server REST Web Service Setup
4 Lectures 21:05

We will install the POSTMAN Tool to help us connect and test our webservices which we will be using in our Angular 2 application. 

POSTMAN website: https://www.getpostman.com/

Installing and Running the POSTMAN API Tool

Before we learn how to fetch data from an API web service using Angular 2, let's first create our own API service using JSON-Server. This lecture will provide a step-by-step guide on how to install JSON-Server. 

JSON-Server Github : https://github.com/typicode/json-server

JSON Server Installation

Testing JSON Server's CRUD Operations with POSTMAN

Preparing a Custom JSON-Server API Data
Building a CRUD Application in Angular 2
10 Lectures 59:19

READ: data using ngFor

READ: data using a Table

CREATE: Data using POST

Updating data with PUT HTTP Method

DELETE: data with DELETE HTTP Method

Here's the custom Loader CSS that is used in this lesson:

.loader {
    border: 66px solid #f3f3f3; /* Light grey */
    border-top: 66px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 320px;
    height: 320px;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle ;
    margin-top: 200px !important;
      display: table-cell;
        position: relative;
  top: 50%;
  transform: translateY(-50%);
    animation: spin 2s linear infinite;

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }

Adding a Simple Spinner Loader

Auto-Refresh Data Table

In this lecture, we will learn how to create a simple modal. 

Preview 09:07
3 More Sections
About the Instructor
Jon Bonso
4.7 Average rating
2,391 Reviews
22,021 Students
5 Courses
Full Stack Developer

Jon is a Full Stack software developer based in Sydney, Australia, with over a decade of diversified experience in Banking, Financial Services, Telecommunications and Healthcare industries.  He was also employed to top tech and finance companies such as HP, Accenture, Telstra, Macquarie Bank and Credit Agricole CIB to name a few. 

On the side, he is also doing freelance jobs on web development and mobile apps for various clients. When he's not in front of the screen, he likes to play the piano and guitar.