Complete Angular Course 2024 – Master Angular in only 6 days

Course Curriculum

Chapter 1: Day 1: Building an Appointment app with components and data-binding

Lecture 1: Defining your Angular goal

Lecture 2: Get the most out of this course

Lecture 3: Day 1 Topics

Lecture 4: Angular building blocks

Lecture 5: What you will build

Lecture 6: Source Code: Appointment App

Lecture 7: Building Angular applications in a web browser

Lecture 8: Installing Node.js and Visual Studio Code

Lecture 9: Important: Update Read this BEFORE you create an Angular project

Lecture 10: Installing the Angular CLI

Lecture 11: Angular 17 project creation flag

Lecture 12: Creating and serving an angular application

Lecture 13: Angular under the hood

Lecture 14: Components

Lecture 15: Creating the appointment-list component

Lecture 16: Introduction to typescript

Lecture 17: One-way data binding with appointment property

Lecture 18: Creating an appointment interface

Lecture 19: Visual Studio Code Angular extension

Lecture 20: Adding two-way data binding

Lecture 21: Adding a button click event listener

Lecture 22: Adding an appointment to the array

Lecture 23: Adding an appointment list using ngFor

Lecture 24: Removing appointments

Lecture 25: Storing appointments in the local storage

Lecture 26: Using ngOnInit to load appointments from local storage

Lecture 27: Adding bootstrap

Lecture 28: Styling the application

Lecture 29: The most commonly used commands in Angular

Lecture 30: Handout Components

Lecture 31: Day 1 Progress Report

Chapter 2: Day 2: Build a Hotel Reservation App with Services, Forms, and Routing

Lecture 1: Day 2 Topics

Lecture 2: The hotel reservation app

Lecture 3: Source Code: Hotel App

Lecture 4: Creating the hotel app project

Lecture 5: Project architecture hotel app

Lecture 6: Creating all modules, services and components

Lecture 7: Creating the reservation interface

Lecture 8: Creating routes

Lecture 9: Building a simple navigation

Lecture 10: Creating a form group

Lecture 11: Creating the reservation form

Lecture 12: Validating a form using reactive form validation

Lecture 13: Dynamically toggle html attributes based on form state

Lecture 14: Showing validation messages

Lecture 15: Creating the reservation service

Lecture 16: Injecting the reservation service into the form component

Lecture 17: Using the localStorage in the reservation service

Lecture 18: Showing all reservations in a list

Lecture 19: ngtemplate and local reference

Lecture 20: Using the router navigate method to redirect the user

Lecture 21: Deleting reservations

Lecture 22: Creating unique ids for reservations

Lecture 23: Adding the edit route with parameter

Lecture 24: Editing reservations

Lecture 25: Combining components from different modules

Lecture 26: Styling the home component

Lecture 27: Styling the reservation form component

Lecture 28: Styling the reservation list component using a table

Lecture 29: Handout Modules

Lecture 30: Day 2 Progress Report

Chapter 3: Day 3: Reactive programming with Observables, HTTP and Mock APIs

Lecture 1: Day 3 Topics

Lecture 2: Modern web architecture

Lecture 3: What you will create during this section

Lecture 4: Using Mockoon as a mock backend api

Lecture 5: Preparing the project for the mock backend api

Lecture 6: Calling the mock api using the http client and observables

Lecture 7: Returning reservations from the mock api

Lecture 8: Setting up all mock api endpoints

Lecture 9: Finishing all CRUD operations with observable implementation

Lecture 10: Handout Observables

Lecture 11: Day 3 Progress Report

Chapter 4: Day 4: Building an ecommerce web application with Angular Material and more

Lecture 1: Day 4 Topics

Lecture 2: Project overview

Lecture 3: Important: Project Materials

Lecture 4: Switching to a new angular version

Lecture 5: Creating the product module, service and component

Lecture 6: Creting the product class and clearing the template

Lecture 7: Setting the product route

Lecture 8: Setting up the mockoon api

Lecture 9: Creating environments

Lecture 10: Getting products from our product service

Lecture 11: Product list displaying products

Lecture 12: Serving for environments

Lecture 13: Installing angular material and exploring cards

Lecture 14: Creting mat-cards for products

Lecture 15: Applying the angular material style and product images

Lecture 16: Responsive product grid

Lecture 17: Adding an eye-catching hover effect

Lecture 18: Adding a container css class

Lecture 19: Adding a navbar