Angular 16 & RxJS: Build Modern Single Page Applications

Install and customize Visual Studio Code for angular development by downloading, installing, and selecting theme, then boost productivity with extensions like Angular language service, Angular snippets, and prettier code formatter.

Explore the Visual Studio Code interface, use the left toolbar icons for files, search, source control, run and debug, and extensions like TypeScript and Prettier to streamline Angular development.

Install and verify Node.js and npm for Angular development, using node -v and npm -v to confirm versions, then keep both up to date to manage dependencies with npm packages.

Set up your first Angular app by following the official docs, creating the project folder, installing Angular globally, configuring routing and styling, and running ng serve --open.

Explore the Angular folder structure and essential files that organize a modern application. Learn how Webpack, Babel, src, index.html, main.ts, style.css, angular.json, and tsconfig.json shape deployment and development.

Discover how TypeScript, a superset of JavaScript, adds static typing and modules, compiles to JavaScript, and supports optional typing for both client and server Angular apps.

Explore variables in TypeScript and JavaScript, clarifying that TypeScript is a superset of JavaScript and compiles to JavaScript. Demonstrate var, let, const differences, reassignment vs redeclaration, and const immutability.

Explore JavaScript data types and their TypeScript relationship, including string, number, boolean, symbol, null, undefined, and object, with arrays and type checking using typeof and console.log.

Explore how functions encapsulate logic for reusability and modular code, with parameters and ES6 arrow functions in JavaScript, and see how console logs and returns drive execution.

Explore how JavaScript events respond to user interactions, including click, key down, and mouse events. Learn to attach listeners with document.querySelector and addEventListener.

Learn how JavaScript keywords like let and const define block scope and encapsulation, explore data access via this and functions, and inspect objects using the console.

Learn how Angular components encapsulate presentation and behavior to create modular, reusable parts of a web app, and use the Angular CLI to generate components, edit their templates and styles.

Use interpolation in Angular templates to display and update data from component properties with double curly brackets, enabling dynamic changes such as updating name and email via a button click.

Learn to create and handle button click events in an Angular app, bind events with Angular syntax, show alerts or log to console, and update dynamic data with type-safe handlers.

Learn how Angular modules organize an app by grouping components into dedicated modules, such as a sign up authorization module, to reduce the load on a single module.

Explore how ngFor uses directives to render arrays and arrays of objects in a UL via interpolation, displaying details like name, email, gender, and age with a single loop.

Demonstrate ngIf else in Angular by using ng-template to render true and false branches based on login status and extend with additional conditions.

Learn how the ng switch directive enables conditionally displaying data with multiple cases and a default, by building a color selector using a TypeScript function and Angular bindings.

Discover how to implement basic routing in angular by creating routes for home, about, and privacy, wiring components, router outlet, and links to showcase dynamic content.

Apply dynamic routing in Angular to fetch data from a database, pass it through routes, and display a username using route parameters initialized in ngOnInit.

Explore component interaction in angular by wiring data transfer between the about, home, and privacy components using event emitters and output, with routing to reflect updates.

Build a functional todo app in angular 16, setting up routing, creating an app component, adding and deleting tasks, and debugging data flow with console checks.

Refine the app's user interface by styling with css, centering content, and customizing the input, button, and display; explore host styling and prep for Bootstrap in an Angular 16 project.

Install bootstrap in an Angular app and correctly add the bootstrap css via angular.json styles to enable Bootstrap styling in the todo app.

Learn to implement a bootstrap-powered navbar in angular 16, leveraging base components, routes for home, about, privacy, and contact, and responsive dropdowns for seamless navigation.

Set up bootstrap in an Angular project using the bootstrap angular module, install dependencies, and configure HTML and TS files to build and troubleshoot a modern single page application.

Discover RxJS core components, key points, and purposes, including observables, operators, subscriptions, subjects, and schedulers, and see how bootstrap setup and routing combine with promises in Angular.

Explore how RxJS enables reactive programming in Angular, simplifying asynchronous tasks, event handling, and data transformation with observables and operators like map, filter, merge map, and switch map.

Explore RxJS fundamentals: observables, operators, subscriptions, and schedulers. Set up a Bootstrap-enabled Angular project, adjust the navigation bar, and implement routing with promises, a component, router link, and router outlet.

Explore how promises work by using resolve and reject, then and catch, with a practical apple purchase example and setTimeout delays.

Explore observables as a foundation of reactive programming, watching data streams from http requests, user actions, timers, and events, with practical examples using observers, timers, and intervals.

Explore how operators like map transform data from an observable in angular, using pipe, error handling, and completion alerts, to build responsive single-page apps.

Create a string observable from events like user input, button presses, or http requests, then use the intima method to start the observer.

Learn interval subscription patterns in Angular 16 with RxJS by building an interval server, creating a string group, and configuring subscriptions with conditional unsubscription.

Explore the of operator in RxJS and learn how to apply a command on a sequence, create reusable services, and wire data from the web into a simple app.

Explore the subject in RxJS, a special observable that enables multicasting and data sharing across multiple subscribers, enabling inter-component communication in Angular applications.

Explore how subject behavior in RxJS enables inter-component communication and real-time data updates, supporting state management, caching, memorization, and robust error handling across an Angular app.

Practice using subject behavior to change data once and share it between two components via onClick events, using the provided source code and data.

Explore RxJS subject, behavior subject, and reply subject and how they replay values to new subscribers in Angular 16, enabling a YouTube style admin and user feed of latest blogs.