Mastering Angular 15/16/17 From Scratch Step By Step

Create your first Angular application, understand the pre-written boilerplate and environment setup, then build and run it locally with ng build and ng serve on localhost:4200.

Explore the angular project structure by examining key folders and files—node_modules, src, dot editor config, gitignore, and TypeScript configs—and see how angular.json and package.json guide development.

Explore how the src folder houses an app, assets, and five icon.ico file, with index.html, main.ts, and styles.css serving as entry point and global styles for a single-page angular app.

Understand how package.json defines a project, including name, version, dependencies, dev dependencies, and scripts; grasp caret and tilde versioning and how npm install resolves modules and runs start, build, test.

Understand the difference between package.json and package-lock.json, including how npm install uses lock files to lock exact versions, manage dependencies, and ensure reproducible builds by committing to your repository.

Learn how global and local packages differ, how npm install adds dependencies and dev dependencies, and how to manage node_modules, package.json, and package-lock.json for Angular projects.

Inspect angular.json to understand project root, source root, prefixes, and output path, plus entry point and assets. See how styles, scripts, and configurations shape app's starting page and component naming.

Describe how the Angular build process uses the TypeScript compiler, the Angular compiler, and webpack to bundle code into main.js, runtime.js, styles.js, vendor.js, and polyfills.js.

Understand the angular startup flow from index.html to main.ts and app component, bootstrapped by platformBrowserDynamic with the root selector, after loading runtime.js, polyfills.js, styles.js, vendor.js, and main.js.

Learn how to run an Angular app in production by building with ng build, serving the dist folder with a static http server, and testing on port 8000.

Explore creating Angular components in inline templates, code-behind, and via the Angular CLI, including building, serving, and bootstrapping a custom component.

Learn how to create a code behind Angular component with separate HTML and CSS files using template URL and style URLs, and bootstrap multiple components on a single page.

Learn to create Angular components with the Angular CLI, which generates boilerplate files (ts, html, css, spec), updates app.module.ts, and uses selectors like app-hello-world-component to embed multiple components.

Learn to nest Angular components by embedding a code behind component inside the inline component, and a Hello world component inside that, so output comes from all three components.

Explore the ngIf directive in angular through a step-by-step demo that introduces built-in directives like ngIf, ngSwitch, and ngFor, and shows creating a component, bootstrap, and conditional templates.

Explore advanced ngIf usage in Angular: implement true/false templates with ng template, switch between logged in and logged out views, and apply relational conditions and attribute directives.

Apply the ngSwitch directive to map country codes to currencies (INR, USD, AUD, GBP) and handle a default case, while also exploring boolean-based ngSwitch usage for login messages.

Learn to use the ngFor directive to loop through a products array, render rows in a Bootstrap table, and apply odd/even and first/last styling, including ng-template usage.

Learn to load templates dynamically with ngIf (then/else) and emulate ngSwitch by selecting among multiple templates using template refs and ViewChild, plus two-way ngModel binding.

Bind a products array to various HTML form elements with ngFor, including checkboxes, radio buttons, dropdowns, and list boxes, initialize data on ngOnInit, and enable default selections.

Master the nested ngFor pattern in angular by iterating outer categories and inner products, and render them in lists or dropdowns using opt group with labels.

Explore the ng-container directive to render product lists with ngFor without extra DOM elements, comparing it to ng-template and div wrappers.

Learn how to use Angular's ngClass directive to apply bootstrap and custom CSS to HTML elements dynamically, including single and multiple class bindings via string literals and object maps.

Explore one-way data binding in Angular by binding component properties to input text boxes and table cells, using property binding [value], textContent, and string interpolation with braces.

Master attribute binding in Angular by using square bracket syntax and attr dot height to set the table height, and span a cell across multiple columns.

Learn how to use ngStyle to apply dynamic CSS properties in Angular, returning multiple styles (font size, margin, color) from a function that adapts color based on product cost.

Explore two-way and event binding in Angular by building a product model, binding form controls with ngModel, importing forms module, and performing calculations on button click.

Explore two-way binding in Angular by binding a product model to a Bootstrap form using ngModel, and handle event binding to compute bill amount, discount, and net total.

Set up a sample Angular project and explore built-in pipes to transform data, display products from a JSON array in a Bootstrap table, and plan for custom pipes.

Explore how built-in Angular pipes change string casing, applying uppercase, lowercase, and title case to the product name using the vertical bar operator.

Explore formatting numerical data in Angular using built-in pipes—number, currency, and percent—setting min integer digits, min and max fraction digits, USD currency code, and its symbol with comma separators.

Explore how to apply the built-in date pipe in Angular to format dates with short, full, and custom formats, including time zones and day name options.

Learn to serialize data as json in angular using the json pipe to display an array of records, like dot products, in the browser for internal representation.

Format key/value pairs in Angular by using the key value pipe to display item.key and item.value in a Bootstrap table with two columns, applying the JSON pipe to reveal values.

Use the built-in i18n select pipe to map city names to delivery durations and display automatic delivery status in a table, with cities like Hyderabad, Delhi, Mumbai, and Chennai.

Explore Angular's i18n plural pipe for zero, one, and multiple items using a shopping cart example with an items array and length.

Gain a quick overview of rest APIs and learn how to consume them in an Angular app using a free sample API, perform get requests, and display results.

Consume a rest api in an angular app by fetching all user records, converting the response to json, and rendering them in a bootstrap table.

Fetch a single user by ID from a REST API, and display details in a Bootstrap card. Add next/previous navigation and an ngIf toggle for address details.

Discover how to use the view child decorator in Angular to render four on-demand templates—account, name, address, and geolocation details—via a menu of buttons.

Demonstrates rendering four Angular templates with the view child decorator and template references, loading user data from a rest API and switching views with next, previous, and display view.

Display all users from the fake store API as bootstrap cards in an Angular component, showing each user's ID, first name, last name, and email. Cards wrap to multiple rows.

Create a shopping cart page in Angular by calling a fake store REST API to populate a dropdown with categories, including all categories, and display products accordingly.

Filter products by category in an angular app with a dropdown, fetching all or category-specific items from a fake store API, and display image, title, price, and rating in cards.

Learn how to add items to a shopping cart in an Angular component by fetching product data from an API, updating a cart items array, and toggling a cart view.

Delete a shopping cart item in Angular by confirming before removing it from the cart items array with splice, then refresh the cart count and update the UI.

Create an Angular service with ng generate service, use the HTTP client to fetch categories and products from the fake store API via observables, and inject it in app module.

Learn to call a service from an Angular component using dependency injection, subscribe to observables, and display categories in a dropdown and products in a bootstrap table.

Learn how to pass data from a parent to a child Angular component using input decorators, define input properties, and display a message and product details in the child.

Learn to pass data from a child component to a parent using the output decorator and event emitter, and receive the message in the parent.

Demonstrates building a two-component Angular app that uses input properties and an output event emitter to filter products by category, display category counts, and prepare for parent–child communication.

design a parent component in Angular that hosts a child filter, passes counts via input properties, and handles an output event to load and display category products from an API.

Master the ngOnChanges lifecycle hook to track input property changes in Angular, using @Input and SimpleChanges to compare old and new values in a parent‑child data flow.