Master Angular 4 by Example - Build 7 Awesome Apps!
3.6 (57 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.
880 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Master Angular 4 by Example - Build 7 Awesome Apps! to your Wishlist.

Add to Wishlist

Master Angular 4 by Example - Build 7 Awesome Apps!

Learn many advanced features in Angular 2+ by building 7 applications. Includes CRUD, Node.js, Routing and much more!
3.6 (57 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.
880 students enrolled
Created by Patrick Schroeder
Last updated 7/2017
Current price: $10 Original price: $195 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 8 hours on-demand video
  • 80 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Develop Applications using Angular
  • Build Apps with Angular and Node.js
  • Implement CRUD in Angular
  • Use Advanced Routing
  • Go Real-Time with SocketIO
  • Work with Template-driven and Reactive Forms
  • Add Modal, Tooltips and Pagination
  • Understand how to use Observables
  • Display Loading and Error Messages
  • Work with Many Different API's
View Curriculum
  • Angular 2 Basics
  • Javascript Basics

Learn Angular 4 by building 7 interesting applications

In this course we cover many important and advanced Angular features that you can use right away in your own applications.

For each example app, we will download a simple boilerplate and then jump right in and start coding our apps. This course is suitable for anyone who already understands the basics of putting together Angular 2+ applications.

About the Apps:

1. Simple CRUD

- You will learn:

  • To use our Boilerplate code
  • How to perform CRUD operations on a list of products
  • Basic Angular concepts such as ngFor and ngIf
  • How to build components, services and modules


2. Pokedek

- You will learn

  • CRUD using the in-memory-API
  • How to use Observables
  • Working with Template driven forms
  • Add a Modal and Tooltips


3. TV Watcher

- You will learn:

  • How to separate your code by feature into their own Modules
  • Routing to muliple parameters
  • How to pass data to unrelated components
  • How to send multiple HTTP requests using forkJoin 
  • Handle errors and display loaders
  • Use the TVMaze API to search and display shows


4. Weather App

- You will learn about:

  • Observables including advanced concepts like debounceTime and switchMap
  • How to perform CRUD operations to add and remove new Weather items
  • Using Reactive forms
  • Input and Output
  • Communicating with the OpenWeather API


5. Socket Chat

- You will learn:

  • How to connect Angular to a Node.js backend
  • Use Socket-IO to connect client with server
  • Send messages in real-time across unlimited connected clients


6. Twitter Streaming

- You will learn:

  • How to connect Angular to Node.js
  • How to use the Twit npm module to connect to the Twitter API
  • To search tweets by keyword 
  • To display tweets in real-time using Socket-IO. 
  • Create pagination using ng2-bootstrap


7. Geonames App

- You will learn:

  • How to sort and filter data 
  • How to route to an inner page
  • Use the Geonames API


More to come!  You can expect at least 1 more app to be added to this course.  

Enroll now to take full advantage of the limitless possibilities when using Angular to develop your applications!

Who is the target audience?
  • Someone who already understands the basics of building Angular 2 applications using typescript.
  • Developers who want to explore more advanced concepts in building their Angular applications.
Compare to Other Angular Courses
Curriculum For This Course
85 Lectures
2 Lectures 04:07

We'll be using a basic starting template for each of our projects. This starter code can be found in the intro lecture of every section or in the github repo.

The Boilerplate
Simple CRUD App
11 Lectures 56:54

Overview of the project that includes app demo and what you will learn.

Preview 01:27

Basic setup for our application and an introduction to our boilerplate that we'll be using throughout this course.


Create our product component and service. Add in our raw html into the product.template file.

Basic Component and Service

Create our getProducts method inside our service and in 3 products to display in our template.

Get Products

Create a data store for our product items and remove these from our service file.

Product Items

Create our edit products form method to display and edit products.

Edit Products Form

Create our add products method in our service to add new products to our application.

Add Products

In this video we will add lodash to our package.json so we can use the clone and findIndex methods to update our products. We'll also be updating our product.template file to add in a new form field.

Update Product

Finish with our product update implementation by adding updateProduct methods to our component and service.

Update Product - Part 2

Remove a product from our list using the splice method.

Remove Product

Add in a currency pipe to display USD as the price. Create a method to cancel actions in our product form.

Cancel Method & Currency Pipe
15 Lectures 01:23:37

Overview of the project that includes a demo of the Pokedek app and what you will learn.

Preview 01:40

Project setup. This includes adding in our font-awesome and Bootstrap v6 to our list of dependencies, downloading our packages, and editing our index.html file to include new scripts.


Fix our navbar so that it works with Bootstrap V4. Include our newly created components and service into our app.module.ts file. Add in the code for our Pokemon interface.

Fix Navbar

Add in our jumbotron and pokemon list HTML template.


Add a getPokemon() method to our pokemon service file to get all pokemons.

Pokemon Service

Add bindings to our pokemons list template and display all the pokemons on our home page.

List Pokemons

Add a pokemon-data file that utilizes the in-memory-API to perform CRUD operations on our pokemon data.

Refactor using In-Memory-API

Add logic for deleting a Pokemon.

Delete Pokemon

Add in the pokemon form and create our template bindings.

Add Pokemon Form

Add in the logic for saving a new pokemon.

Save Pokemon

Add better form validation by adding mouseenter and mouseleave events to our submit button.

Form Validation

Add NG2-bootstrap to our project so we can include functionality like a modal and tooltip in our application.

Modal and Tooltip

Add methods for retrieving single pokemon and display the details in our modal.

Get Single Pokemon

Finish work on our modal by adding single pokemon bindings to our modal template.

Modal Template

Refactor modal into a child component.

Refactor Modal
TV Watcher
21 Lectures 02:09:41

Overview of the project that includes app demo and what you will learn.

Preview 01:20

Project setup. Clone ng-boilerplate from our github repo, add Bootstrap V4 and include scripts inside our index.html file.


Begin work on our navigation and footer elements. Separate this functionality into its own UI module.

Menu and Footer

Finish setting up the UI section of our app. Add selectors to our app.template file to display these areas on every page.

Menu and Footer - Part 2

Begin work on our carousel. Add our files, scaffold out the components and add them to our Carousel Module.

Carousel Setup

Add code for our carousel service and carousel container component.

Carousel Service

Finish coding our carousel template. Debug errors and add in our Provider and Service.

Carousel Template

Begin work on our featured shows to be displayed below the carousel. Add our new files, create an interface, and code the featured-shows template.

Featured Shows

Add our show-details template and our Featured Module.

Featured Shows - Module

Add code for our featured service and featured comonent files.

Featured Shows - Service

Fill out our show details and add our featured shows selector below the carousel.

Featured Shows - Show Details

Begin work on our find shows feature. In this video we take a look at the TvMaze API and add in the template we'll be using to display our list of shows.

Find Shows

Add our Search Module and fix a bug when adding new links to our navbar.

Find Shows - Module

Add in our service and component files to make a call to the TvMaze API. We'll be using Reactive Forms to pass the query string to our GET request.

Find Shows - Service & Component

Edit our search template to display shows. Test out our new search functionality.

Find Shows - Template

Begin work on search functionality from the Navbar. Create a Nav Service and add it to our Search Bar component.

Search in Navbar

Finish implementing search functionality using our Navbar component. 

Search in Navbar - Part 2

Introduction to our details page. Add in our new files and scaffold out our component and service files.

Details Page

Add in our two interface files and code our Details Service.

Details Page - Service

Code our Details Component file.

Details Page - Component

Add binding to our template page and test our finished TV Watcher app.

Details Page - Template
Weather App
10 Lectures 01:02:00

Overview of the project that includes app demo and what you will learn.

Preview 02:13

Project setup includes editing our navbar and creating the necessary folders and files.

Resources includes the finished code.  Check the previous lecture to find the boilerplate code.


Scaffold our components and add to app.module. Add our weather interface.

Weather Interface

Set up our weather service and add in our methods.

Weather Service

Add our component HTML code and test app.

Component HTML

Putting together our weather search component so we can display cities.

Weather Search Component - Part 1

Finishing up our weather search component and testing out the functionality.

Weather Search Component - Part 2

Create our profile service and refactor out our rxjs imports into their own file.

Profile Service

Walk through our sidebar template html file. Create the first 2 methods inside our sidebar component file.

Sidebar Html and Component

Add 3 more methods to our sidebar component and test out our finished application!

Finish Sidebar Component
Socket Chat
5 Lectures 27:39

Overview of the project that includes app demo and what you will learn.

Preview 00:47

Setup our application. This includes using gulp to add a lib folder to our frontend and setting up a simple Node server using express.js.


Connect to client and server. Test sending and receiving messages using On() and Emit() methods. Connection

Create a socket service provider. Add in our home.template file.

Socket Service

Add chat functionality in our home component and server.js files.

Adding Chat
Twitter Stream
13 Lectures 01:15:47

Overview of the project that includes app demo and what you will learn.

Preview 01:19

In this video we'll explore the modules used. Then set up our server and run our app.


Add ng2-bootstrap to our app and create our ITweet interface.

ITweet Interface

Add a searchTweets method to tweet service and start work on our tweet component.

Tweet Service

Setup our Tweet component, service and template files.

Tweet Files

Finish our tweet component and test our app by displaying the tweet object we get in our console.

Tweet Component

Finish adding angular code to HTML file. Test out search functionality.

Tweet Template

Add the timeAgo pipe in order to display tweets that gets updated in real time.

TimeAgo Pipe

Overview of how to set up the streaming portion of our app and connect to

Streaming Setup

Add server side functions to send messaging based on different stream events. Setup our socket service to stream tweets using

Socket Service

Setup our stream component and stream template.

Stream Component

Add socket service methods to stream in tweets. Test out our streaming tweet implementation.

Stream Tweets

Refactor our stream component to use observables instead of events to start streaming and handle the emitted objects.

Refactor Stream to Observable
Geonames App
8 Lectures 42:40

Overview of the project that includes app demo and what you will learn.

Preview 00:57

Setup our project using the ng-boilerplate and add our country interface.


Add our geoname service so that we can load all countries and display the data into a table.

Geoname Service

Add the functionality of filtering countries by Europe, Population or All.


Add options to sort our countries by name and population.


Add jumbotron, spinner and error message to our home.template file.


Add country details page to display individual country info. Includes new route and method to retrieve country data.

Country Page

Finish up the country page by adding our new getCountry() method to our component and angularize our HTML file.

Country Page - Part 2
About the Instructor
Patrick Schroeder
4.2 Average rating
6,921 Reviews
106,899 Students
9 Courses
Software Developer

Patrick Schroeder is a self-taught full stack JavaScript developer. He enjoys working with Angular, Node.js, Mongodb, React.js, Firebase, and anything else javascript related. Patrick is passionate about teaching Javascript. He loves to help others understand difficult concepts by creating clear presentations that gradually builds to full comprehension of a given topic. He is very interested in furthering his knowledge of IOT and wearable products with the intention of teaching cutting edge technologies and collaborating to bring new products to life.