Complete Angular Course 2025 - Master Angular in only 6 days

Explore services, forms, form validation, and routing while building a hotel reservation web application, and save and load data using the browser's local storage.

Create a hotel reservation app using Angular routing, forms with validation, and services to build a comprehensive Angular application.

Create a new Angular project named Hotel Dash app with routing, run ng serve -o, clean the template to keep the router outlet, and begin building components, modules, and services.

Create a reservations interface in Angular to model hotel bookings, stored in a models folder with id, check-in/out dates, guest name, and email, and an optional room number.

Create and bind a reservation form with a form group using the forms module and reactive forms module, and apply validators with reactive form validation in TypeScript.

Attach an ng submit listener to reservation form and implement on submit. Create inputs for check-in date, check-out date, name, email, and room number with form control names and validation.

Learn to validate a reservation form with reactive form validation in Angular by building a form group with required and email validators, wired via a form builder on init.

Learn to show validation messages in an Angular form using ngIf with a form group and control invalid state, including null checks and touched state.

Create and manage reservations with an Angular reservation service that stores data in an array and implements CRUD operations (get all, get one, add, update, delete) via dependency injection.

Learn how to store, load, and update reservations using local storage in an Angular reservation service, including JSON.stringify, setItem, getItem, and constructor-based preloading.

Learn to use ng-template with a local template reference and an ng if directive to conditionally render the reservations list or a no reservation message, improving user experience.

Redirect users after submitting a reservation with the angular router navigate method to /list. Inject Router from @angular/router and call this.router.navigate(['/list']) on submit.

Add a delete button in the reservation list to remove a reservation by its string id via the service, update local storage, and reflect changes from two reservations to one.

Master editing reservations in an angular app by loading a reservation by id from the activated route, pre-filling the form with patchValue, and updating or creating with the same form.

Style the home component with bootstrap, install bootstrap 5.3, and import bootstrap mint CSS; wrap content in a container to center and space buttons for a clean reservation portal.

Learn to style a reservation form component using Bootstrap classes, including form-control, btn-primary, form-label, validation messages, and responsive grid layout for fields like check-in, check-out, guest info.

Style the reservation list as an HTML table with thead and tbody, looping rows with ngFor to display guest name, email, room, check-in, and check-out using Bootstrap table and buttons.

Celebrate completing day two and reflect on lessons learned. Prepare to explore asynchronous development techniques using observables, mock APIs and Http communication to extend today's application.

Explore observables and asynchronous development in Angular, master HTTP communication, and extend the hotel reservation app with asynchronous techniques, plus set up a mock API using Mokuna.

Master modern web architecture with angular, learning how front-end apps use http requests and observables to interact with backend APIs via restful services and asynchronous data flow.

Turn your hotel reservation platform into an Angular app using a real mock API with Mockoon, and learn to send HTTP requests via observables in a service for production-ready apps.

Use Mockoon to create a mock backend API for an Angular front end, exposing a /reservations endpoint on port 3000 that returns Hello world.

Prepare an Angular app to connect to a mock backend API, replacing local storage with a backend data flow via the Http client and observables.

Import the http client module, configure the base api url http://localhost:3000, and send a get request to /reservations returning an observable of reservations to be subscribed in ngOnInit.

Master finishing CRUD operations with observables and the HttpClient in Angular, sending get, post, put, and delete requests to a mock reservation API.

Celebrate finishing half of the Angular course and get ready to build an e-commerce application tomorrow using the Angular Material library.

Explore Angular Material, a component library for building polished Angular apps. We'll combine concepts learned so far to build an e-commerce web application.

Import the product list component into the app routing module, set a redirect to /products, connect the products path to render the product list, and set up a mock api.

Generate and configure Angular environment files to manage API URLs across development and production. Define development API URL as http://localhost:3000 and leave production as an empty string.

Show how the product list component fetches products on init by injecting the product service, subscribing to the getProducts observable, and binding results to a products array for ngFor rendering.

Install angular material, select the Indigo Pink theme, enable typography and animations, then add a toolbar and mat-cart components to improve visuals and user experience.

Learn to implement Angular Material mat-card for product listings by importing MatCardModule in the product module, then render dynamic cards with images, titles, prices, and a custom product-card style.

Master integrating Angular Material styling with product images by organizing assets, interpolating image URLs, and formatting prices with a currency pipe, then styling a grid of cards.

Add a hover effect to product cards by scaling the mat-card and showing a pointer cursor. Implement a 0.2 second transition and introduce a container class to offset content.

Add a navigation bar with Angular Material toolbar across pages, linking to products and cart, by importing mat toolbar and mat button modules and configuring app.module and app component.

Create a cart service using the environment API URL and http client to add items, retrieve cart contents, and clear the cart with three endpoints.

Fetch and display all cart items by wiring the card service to the cart view component, subscribing to the products observable, and binding data to an Angular Material card list.

Create a product card using Angular Material mat-list to display cart items with mat-list-item, including title and line for name and USD price, using a mock backend.

Add two Angular Material buttons to the cart—clear (flat) and checkout (raised, accent color)—aligned to the right, invoking cart and card services via observable subscriptions for API calls.

Extend your product list with search and filter features using Angular Material form controls. Implement a case insensitive search by name and filter by price with input and select components.

Develop dynamic search and filter functionality by wiring a keyup input to the apply filter method, initializing filtered products, and preparing for price-based sorting.

Learn to add sorting in Angular by using the Angular Material select, tracking sort order, and sorting the filtered product list by price low-to-high or high-to-low.

Explore reactive development concepts like states, stores, and reducers on day five of the angular course. Build a reactive book management web app using angr with hands-on learning.

Learn how NgRx solves the problem of coordinating data across components with a single source of truth and a flux pattern for reactive Angular apps.

Create a book interface and a global app state with a read-only books array, registered in a store, and outline actions and reducers for a reactive Angular app.

Create add book and remove book actions for the book entity using create action and props. Connect these actions to the reducer to process adding and deleting books.

Create the book reducer to process add book and remove book actions, wiring it with create reducer and on, while the reducer handles the books slice of the app state.

Set up the global store by registering the book reducer in the root store module, tying actions and current state to a new state.

Learn to load books from the store in book list component by creating an observable books property, selecting from the store with rxjs, and reacting to actions to update state.

Apply the app state interface to enforce type safety across the store, ensuring the book property is an array and maintaining immutability in reducers.

Set up a home route to display the book list, render books with async pipe, and add or remove books by dispatching actions to the store.

Explore NgRx effects by building a book service and two actions for success and failure. Connect reducers and component subscriptions to manage data flow.

Configure add book actions, including add book, add book success, and add book failure, with effects handling API calls and reducer updates, plus Angular dev tools visualization.

Adjust the reducer to handle add book, add book success, and add book failure actions, with the effect coordinating the service call and state updates.

Learn to set up angular effects by creating a book effects class, injecting actions$ and a book service, and implementing an add book effect with createEffect and ofType.

Register a root effect and integrate the store dev tools to inspect actions, state, and diffs; test add book flows, including success and error handling, in an Angular app.

Celebrate finishing five of six modules in the complete Angular course, reflecting on intense topics. Gear up for the final day focusing on unit testing with Karma and Jasmine.

Master unit testing in angular using jasmine and karma, testing components, services, and pipes, writing specs with describe and it, and running ng test for regression prevention.

Create your first unit test in Angular by scaffolding a new project, writing a spec for the app component, and using Jasmine expectations to verify a defined title.

Create a real-world unit test by building a user service in Angular, implementing getUsers that returns an observable of sample users, and testing that the service returns users.

Write tests for the user service using test bed and before each test. Ensure a fresh service instance and verify get users returns an array with length greater than zero.

Create and test an Angular user list component. Implement ngOnInit to fetch users from a service, render with ngFor, and include a refresh button with unit tests.

Explore how to set up and test an Angular component using the test bed and component fixture, creating declarations, triggering change detection, and validating component creation.

Isolate an Angular unit test for a user list component by spying on the user service's getUsers method with Jasmine and returning mock data via RxJS of, configured in beforeEach.

Develop unit tests for a user list component to verify ngOnInit gets users from a mocked user service, using a spy and fixture detect changes.

Learn to write unit tests for an Angular component's ui functionality by verifying that clicking the refresh button calls the get users method on the user service.

Learn angular signals, a reactive wrapper that notifies consumers and enhances change detection with a push approach, illustrated by a dark mode toggle and total price from price and quantity.

Set and update a writable signal using set and update to toggle between light and dark themes, leveraging the current value and managing dependencies.

Use Angular signals and effects to run code when the signal value changes, update a label with the theme, and toggle dark mode through a constructor-based effect.

Create a computed signal that depends on the quantity signal to calculate the total price from price and quantity, with the total price read-only and updating automatically.

Master a real-world angular signals workflow by importing the common module, using signal and computed, and filtering a products array with ng4 and ng for.