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.

Explore the hotel reservation app architecture by implementing CRUD operations (create, read, update, delete) with a reservation service, modules, components, and router-driven navigation in a restful API context with Angular.

Generate Angular modules, components, and a service; attach components to modules with module flag, declare them correctly, and set up home and reservation modules with their forms, lists, and tests.

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.

Start ng serve, view app in a browser, and render routes with the app routing module to define home, list, and endpoints for the reservation list and reservation form components.

Build a simple navigation menu in the home component using router link, configure routing in feature modules, and expose routes like /new and /list to navigate between reservations.

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.

Master dynamic form controls in Angular by binding the submit button's disabled state to the form's validity, using a form group to toggle disabled when invalid and enable when valid.

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.

Inject the reservation service into the reservation form component using Angular dependency injection and call add reservation with the form values, separating UI from data logic.

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.

Create and bind a reservation list component that loads reservations via the reservation service on init, then render each reservation's guest name, email, room, check-in, and check-out using ngFor.

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.

Add a unique id to every reservation by generating it from the date and converting it to a string, ensuring distinct ids and enabling reading or editing by id.

Create an edit route with a parameter to edit a reservation by id, load the item into the reservation form, and configure router navigation.

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.

Learn how to compose Angular components across modules by exporting the home component and importing its module into the reservation module, enabling a shared navigation menu.

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.

Set up http requests to a mock api for reservations with authorization headers, build a json reservations array, and implement create, update, and delete endpoints.

Set up mock api endpoints for a reservations system using Angular, including list, single by id, create, update, and delete with realistic http status codes, simulated via local storage.

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.

Build an interactive e-commerce app with loaded products, hover effects, add-to-cart actions via the Mccoon API mock back end, plus search, sort, cart view, and checkout using Angular Material.

Switch to the latest angular version by uninstalling and reinstalling the angular CLI globally, verify with ng version, and consider ng update to refresh workspace and dependencies.

Create the product module with a product list component and a product service, define a product class to avoid any, and connect the module to enable http requests.

Create a product class with id, name, price, and image_url using the Angular CLI to generate the class in models folder, then initialize values and configure routes with router outlet.

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.

Set up the mockoon api environment and import data. Connect to the localhost api, explore the products endpoint with 12 items and image URLs, and manage the cart.

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.

Fetch all products from the product service by sending a get request to the /products endpoint using the environment API URL and Angular HTTP client to return a product array.

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.

Configure and serve your angular app with environment-specific settings to view data in development. Use ng serve --configuration development to switch between development and production configurations in angular.json.

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.

Master building a responsive product grid in the angular course 2025 using angular flex layout, installing the package, and applying layout row, wrap, and gaps for device-adaptive grids and hover.

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.

Create and duplicate reusable container css classes to standardize layout across components, defining padding, max width, and centered alignment, and apply a light body background to achieve consistent styling.

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.

Enhance user experience by adding a concise page description that clearly communicates what the site offers, using a container class and centered text in app.component.html to present a cohesive layout.

Create a cart module with a cart service and cart view component, add routing for /cart, and connect to endpoints like get /card, post, and delete.

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.

Calculate the total cart price by summing item prices from the card items, expose a get total price method, and display the bold USD total with data binding.

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.

Connect add to cart actions to the cart service and trigger an Angular Material snack bar showing product added to cart for 2 seconds at the top right.

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.

Finish day four of the complete Angular course and celebrate your progress. Prepare for day five, when you learn about anchors and how to build reactive applications in Angular.

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.

Explore how NgRx enables state management in Angular apps by dispatching actions, using reducers, and updating components via selectors and effects in a one-way data flow.

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.

Register add book and remove book actions in the book reducer, using the initial state, the current state, spread operator, and filter to create a new 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.

Create a book-list component, inject the store, and implement add book and remove book actions to manage books through dispatch and select data from the store.

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.

Create a book service that returns an observable of a book, enabling the effect to dispatch add book success or add book failure actions while simulating a backend.

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.

Create an effect that listens for the add book action from the actions observable, uses mergeMap to call the book service, and dispatches add book success or add book failure.

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 with Karma and Jasmine on day six, and learn to run tests that secure and validate your software functionalities.

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.

Run unit tests with Karma to verify the app component title is defined, interpret test reports, and fix failures to ensure all tests pass in a real-world workflow.

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.

Finish the complete Angular course and celebrate day six, having built a comprehensive understanding of Angular, one of the most popular front-end frameworks.

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.

Create a writeable angular signal initialized to light, read it with a getter, and update it with a setter to toggle themes and apply the body class.

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.

Learn to pass data from a parent to a child with signal inputs in Angular, using a product list component, input signals, and a computed signal for dynamic rendering.