Angular 4 Front To Back
4.7 (869 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.
2,737 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 4 Front To Back to your Wishlist.

Add to Wishlist

Angular 4 Front To Back

Master Angular 4 from the basics to building an advanced application with Firebase integration
4.7 (869 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.
2,737 students enrolled
Created by Brad Traversy
Last updated 8/2017
Current price: $12 Original price: $50 Discount: 76% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 8.5 hours on-demand video
  • 47 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Build amazing single page applications using Angular 4
  • Master Angular 4 concepts
  • Understand the file and folder structure of an Angular application
  • Build a client management application with authentication and Firebase integration
  • Integrate Bootstrap 4 into Angular projects
View Curriculum
  • You should have a basic understanding of HTML and JavaScript

This course was crafted to benefit absolutely any level of developer. We will start from scratch and learn how to create a development environment for Angular 4, Setup Angular CLI and learn all of the fundamentals. Once we study the core fundamentals in depth, we will start on a basic project and then move to a much more advanced client management system with authentication and data storing with the Firebase platform.

Here are some of the things you will learn about in this course:

  • What is Angular?
  • Dev Environment Setup Including Node.js, Visual Studio Code & Git Bash
  • Angular CLI & Quickstart Seed Setup
  • File Structure & Dependency Examination
  • TypeScript Intro
  • Components
  • Modules & NgModule
  • Data Binding & String Interpolation
  • Types & Interfaces
  • Template Syntax
  • ngIf & ngFor Conditional Directives
  • ngFor & Loops
  • Property Binding, ngClass & ngStyle
  • Pipes
  • Events & Forms
  • ngModel & 2 Way Binding
  • Services
  • Observables & Http
  • Angular Router
  • Firebase & AngularFire2
  • Flash Messaging
  • Much More!!

Who is the target audience?
  • Anyone that wants to learn Angular 4
Compare to Other Angular Courses
Curriculum For This Course
68 Lectures
4 Lectures 15:58

In this video I will introduce myself and go over any prerequisites as well as what to expect from this course

Preview 03:41

Here I will go over the outline of each section and what is included as far as topics and projects

Preview 02:44

Let's talk about what exactly Angular is and what it is used for as well as some of it's advantages

Preview 06:28

The version history of Angular can be a little confusing. In this video I will try and clear that up

Angular Versions Explained
Setup & File Structure
6 Lectures 35:50

An overview of what you will learn in section 2

Preview 02:30

Here we will setup our development environment including installing Node.js with NPM, Visual Studio Code and Git Bash

Preview 07:41

We will get started with the Angular CLI (Command line interface) to generate a new Angular application

Using Angular CLI

We will take a look at what makes Angular 4 tick by looking at the folder and file structure of an application

Angular 4 File Structure

The Quickstart Seed is another way to create a new Angular 4 app. We will set it up and take a peek at the files

Using The Quickstart

TypeScript is a superset of JavaScript and is used with most Angular 2+ applications. Here we will look at some of the features of TypeScript

What Is TypeScript?
Diving Into Components
7 Lectures 37:56

An overview of what we will work on in section 3

Section 3 Introduction

We will discuss what a component is and what the advantages of using them are

Components Explained

Here we will examine the app.module.ts file, NgModule and the AppModule class

A Look At NgModule

Here we will create our first component called SandboxComponent. We will be working with this component for the next few lectures

Creating A Component

I will show you how to bind data from your component to the template using string interpolation 

Data Binding & String Interpolation

Let's take a look at the different types of data that we can define in Angular and TypeScript.

Adding Types To Properties

We will look at how to add interfaces and models to map out our component properties

Objects & Interfaces
Template Syntax
8 Lectures 45:29

An overview of what we will be doing in section 4

Section 4 Introduction

We can use separate files for our html templates and css files

Template Files & Stylesheets

How to loop through data in your template using the ngFor directive

Loop Data With The ngFor Directive

Add conditionals to your templates using the ngIf and ngSwitch directives

Conditionals With ngIf & ngSwitch Directives

Learn how to bind data dynamically to attributes using property binding

Property Binding

Add dynamic classes with the ngClass directive

Class Binding & ngClass

Add dynamic styles using the ngStyle directive

Style Binding & ngStyle

Use pipes like currency, percentage and date to format data in your templates

Using Pipes
Events & Forms
7 Lectures 40:39

An overview of what we will be working on in section 5

Section 5 Introduction

Working with mouse events like click, hover and drag

Mouse Events

How to change properties dynamically using events

Changing Properties With Events

Working with keyboard and input events like keyup, keydown, blur and focus

Keyboard & Input Events

Using the ngModel directive for two way data binding

ngModel & 2 Way Data Binding

Handling form submission and manipulating component properties via forms

Form Submission

How to create template driven forms with ngForm and add some validation

Template Driven Forms & Validation
Services & HTTP
8 Lectures 44:20

An overview of what we will look at in section 6

Section 6 Introduction

What is a service and what are they used for? Also what are the advantages of using them?

What Is A Service?

I will show you how to create a service and import it into ngModule

Creating A Service

We will return an observable / data stream from a service

Working With Observables

We will make a GET request to the JSONplaceholder REST API service using the Http module


We will make a POST request to the JSONplaceholder REST API service using the Http module


We will make a DELETE request to the JSONplaceholder REST API service using the Http module


We will make a PUT request to the JSONplaceholder REST API service using the Http module

Angular Router
4 Lectures 17:12

An overview of what we will learn in section 7

Section 7 Introduction

What is a router and how does it work?

Angular Router Overview

We will look at how to define route paths and link them to components

Working With Routes

We will look at how to use parameters in the url and how to grab them from inside of a component and use them

Params & ActivatedRoute
FAQ App Project
7 Lectures 57:55

We will look at the FAQ app project and see what we will be building

FAQ App Project Introduction

Let's create the navbar and the question list component

Setup, Navbar & Question List

Add the toggle functionality and create the data service for our questions

Answer Toggle & Data Service

We will nest the question component into the question list component

Nesting Components & Input

How to emit output from our question form component

Emitting Output From Components

Add the ability to load and save questions from local storage through our service

Using Local Storage In The Service

Build out the static assets using Angular CLI and upload to a web hosting account

Deploying Our Angular 4 App
Client Panel Project - Part 1
8 Lectures 01:45:43

Let's take a look at the client panel application and what we will be building

Client Panel Project Introduction

In this video we will log into Firebase and create a new project, create the clients collection and setup a new user

Firebase & App Setup

We will generate all of the components needed for this app and setup the navbar and router

Generate Components & Setup Navbar

We will install and setup Firebase and AngularFire2 using NPM and import the necessary modules

AngularFire2 Setup & Client Service

We will fetch clients from firebase and bring them into the clients component

Clients Table Component

We will create the form to add a client to the system

Add Client Form

We will create the service function to insert clients into the clients collection in Firebase

Add Client To Firebase

We will create the individual client component to display client info as well as the outstanding balance

Client Details Component
Client Panel Project - Part 2
9 Lectures 01:39:47

In this video we will add the functionality to update the client balance from the user details component

Client Balance Update

In this video we will add the ability to edit and delete clients from Firebase through our application

Edit & Delete Clients

We will add login functionality and authentication via Firebase and AngularFire2

Login Authentication

We will add the logout functionality and hide and show nav links based on login status

Logout & Nav Links

We will create the authentication guard to apply to certain routes for access control

Auth Guard For Routes

We will add the ability to register users which will be optional when we create the settings

User Registration

Create the settings service to handle app settings like allowing registration

Settings Service & Register Guard

Create the settings form so that we can easily control the settings from the application

Adding The Settings Page

Thank you so much for watching this course. I hope that you learned a lot and I see you in my next course.

Course Summary
About the Instructor
Brad Traversy
4.7 Average rating
1,402 Reviews
5,090 Students
3 Courses
Full Stack Web Developer & Programmer

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.