TypeScript, Angular, Firebase & Angular Material Masterclass

, , Prof. Siddharth Ajmera 0.0 (242 Reviews) 30186 Students Enrolled

FVL is learner-supported. When you buy through links on our site, we may earn an affiliate commission

Updated On 02 Feb, 19


Build Single Page Application(SPA) from Scratch using Angular 5. Learn basics of TypeScript, Firebase & Angular Material

Course Description

Angular is one of the most popular front-end frameworks for building client apps with HTML, CSS, and TypeScript. So basically, if you want to become a successful front-end or a full-stack developer, that get hired, you need to have Angular as a skill under your belt.

Learning Angular 2 or Angular 4 or Angular 5 or Angular 6 or simply Angular(as the Angular team likes to call it) on your own can be confusing or frustrating at times. It might require you to browse through several tutorials, articles, YouTube videos, etc and get a grip on it.

If you want to get rid of going through all that trouble and just focus on learning Angular, this is THE course for you. In this course, I'll take you through an exciting journey of learning Angular concepts through fun and easy to understand coding examples.


As the course progresses, you'll get familiar with:

  1. TypeScript, Angular Application Architecture, and Angular CLI
  2. Angular Modules and Angular Components.
  3. Angular's Component LifeCycle Hooks
  4. Dependency Injection In Angular
  5. Routing
  6. Services
  7. Directives
  8. Pipes
  9. Forms
  10. Custom Decorators
  11. Angular Material
  12. Firebase

TypeScript, Angular Application Architecture, and Angular CLI

  • What is a Single Page Application
  • Why Angular
  • Types
  • Let, Const
  • Class, Interface
  • Fat Arrow Functions
  • Decorators
  • Modules
  • What is Angular CLI and how to use it? Basic tasks (ng serve/build/test, ng generate component/service/directive/pipe)
  • The Architecture of Angular Applications Built using Angular-CLI
  • Change Detection strategy (Zones) - Theoretical

Angular Modules and Angular Components

  • @NgModule
  • Angular Application Bootstrap Mechanism
  • @Component
  • Data/Property Binding
  • View Encapsulation
  • Inter-component Communication (@Input/@Output, Event Emitter)
  • Template variables (ViewChild/ContentChild)
  • Content Projection(ng-content)
  • Templates – will be covered as part of components
  • Metadata – basic overview
  • Lifecycle hooks
  • Order and triggering of each hook
  • Hooks specific to Components and Decorators

Dependency Injection(Providers)

  • Dependency Injection - Why?
  • Dependency Injection - As a design pattern
  • Dependency Injection - As a framework
  • Dependency Injection - What?
  • Injectors and Providers
  • Hierarchical Dependency Injection


  • Child routes
  • Route params
  • Route Guards - CanActivate, CanActivateChild, CanDeactivate, Resolve, CanLoad


  • Service as a singleton, data sharing.
  • HttpClient, HttpHeaders, HttpParams
  • Observables with Operators like the map, subscribe, catch, retry etc
  • Subjects
  • Sharing data across Components using Service


  • Built-In Structural Directives - NgFor, NgIf, NgSwitch
  • Built-In Attribute Directives - NgClass, NgStyle, NgNonBindable
  • Building a Custom Structural Directive
  • Building a Custom Attribute Directive


  • Build in Pipes
  • Building Custom Pipes
  • Pure and Impure Pipe


  • Template Driven Forms
  • Reactive forms
  • Form Validations
  • Custom Synchronous form validations
  • Custom Asynchronous form validations

Custom Decorators

  • Metadata – deep dive
  • Building Custom Class Decorator
  • Building Custom Property Decorator

Integrating with Third Party Libraries

  • Material Design Bootstrap
  • Angular Material
  • Firebase


By the end of this course, you'll be able to: 

  • Build end-to-end Single Page Apps in Angular on your own
  • Understand and fix common compile-time and run-time errors in minutes
  • Understand and implement clean and maintainable code like a professional
  • Apply best practices when building Angular apps

We'll always start with the basics and go from there. Right from the beginning of the second module, you'll jump in and build your first Angular app within minutes.

Angular 2 and all the later versions of Angular has been written in TypeScript. So, before getting started with Angular in section 2, you'll learn the fundamentals of TypeScript and object-oriented programming in section 1 to better understand and appreciate this powerful framework. 

Over the next 15 hours, you'll learn the essentials of building Single Page Applications(SPAs) with Angular

  • Displaying data and handling DOM events
  • Building re-usable components
  • Manipulating the DOM using directives(both Structural and Attribute)
  • Transforming data using pipes
  • Building template-driven and reactive forms 
  • Consuming REST APIs using HTTP services 
  • Handling HTTP errors properly 
  • Using Reactive Extensions and Observables 
  • Adding routing and navigation to adhere with basics of a Single Page Application
  • Building real-time, server-less apps with Firebase 
  • Building beautiful UIs using Angular Material, and Material Design Bootstrap

So, if you're a busy developer with limited time and want to quickly learn how to build SPAs with Angular, you're at the right place.

All these topics are covered by over 15 hours of high-quality content. Taking this course is equivalent to going through hundreds of articles, tutorials, and videos on the web! Just that the content is laid out to cover all that you'll get to know during all that time! Once you go through the course(or just the preview videos), you'll know that the topics are explained in a  clear and concise manner which is going to save you a lot of your precious time! This course is also packed with techniques and tips, that you can only learn from a seasoned developer. You'll see how we'll create a brand new Angular project with Angular CLI and build an application from A to Z, step-by-step.

You'll also get to know ways to build a real-time SPA with Angular, Firebase, and Bootstrap. This application exhibits patterns that you see in a lot of real-world applications:

  • Master/detail
  • CRUD operations
  • Interaction with a data store
  • Forms with custom validation
  • And a lot more...!


You don't need familiarity with TypeScript or any previous versions of Angular. You're going to learn both TypeScript and Angular from scratch in this course.



"Explanation is crisp.. instructor is comfortable with the topic...examples used are good and easy to understand...various aspects of the code are explained...using MDB and material for angular both are covered for creating UI components...just only the full screen is shown at all times.. which makes things appear very small... screen highlight or zoom is not used while recording video.. rest all is great.. for learning angular" - Maneesh Parihar

"內容詳細" - Huang JiaLin

"That's a very comprehensive course on Angular that also teaches Angular Material and Firebase @Siddharth Ajmera: Thanks for this great course! As with so many other courses I would love to see some Summaries or cheatsheets as PDFs or foils and also I'd appreciate to see more schematics, graphs, and sketches." - He

"講解詳細" -曾玟凱

"This course was perfect for beginners like me. I learned so much from it. Thanks a lot Siddharth for such a good course. Looking forward to more courses from you. Can you please add a section that demonstrates building of an application end to end?" - ankita daur

"Siddarth explained the course in a very simple manner and with simple examples. Would love more indepth on Angular Material and Firebase from him. Great course." - Kumar

"There is so much information provided in this course. I was looking for custom Decorators and use cases where in they could be implemented to make the code cleaner. I found perfect examples on similar topics in this training. This course is great for beginners." - Kewal Shah



This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, follow along while coding, and if you are not happy for any reasons, contact Udemy for a full refund within the first 30 days of your enrolment. All your money back, no questions asked.


Siddharth is a software engineer with around 5 years of professional experience. He is the author of this course with more than 15,000 students in 192 countries. He has done his Bachelor of Engineering in Computer Science. He has worked on several Modern Web Applications. Chatbots, and frameworks. He writes articles about Angular, and Chatbots on Medium.

What are the requirements?

  • Basic familiarity with HTML, CSS, and JavaScript
  • NO knowledge of AngularJS or Angular is required

What am I going to get from this course?

  • Establish yourself as a skilled professional developer
  • Build real-world Angular applications on your own
  • Troubleshoot common Angular errors
  • Master the best practices
  • Write clean and elegant code like a professional developer

What is the target audience?

  • Developers who want to upgrade their skills and get better job opportunities
  • Front-end developers who want to stay up-to-date with the latest technology
  • Back-end developers who want to learn front-end development and become full-stack developers
  • Hobbyist developers who are passionate about working with new frameworks



242 Ratings
comment person image


Sed sollicitudin risus eget nisl accumsan, nec gravida metus fringilla accumsan magna a lorem auctor sagittis.

comment person image


Etiam volutpat, orci quis vulputate sodales, metus diam scelerisque ligula, sit amet conggaugue orci ut leo. Sed mattis suscipit urna sed finibus.