Angular Fundamentals from Scratch & Unit/Integration Testing

Explore TypeScript basics as a typed superset of JavaScript, adding oops concepts like classes and interfaces. Learn to install with npm and use Visual Studio Code to build a framework.

Explore let and const in TypeScript, compare them with var, and see how TypeScript compiles to es5 to enable block scope and synchronous-like behavior in asynchronous code.

Learn how TypeScript uses explicit typings to enforce variable types, including const vs let vs var, number and string types, arrays, and the any type for dynamic values.

Learn how TypeScript classes encapsulate properties and methods, implement a constructor, and create objects to set and get username, with ts to js compilation and prototype basics.

Discover how TypeScript constructors initialize objects with default and parameterized forms, using this to assign runtime arguments to class properties, and apply the page object pattern in protractor.

Learn how to export and import classes and functions across files in TypeScript, expose class features, and apply return types to ensure correct JavaScript output.

Explore how interfaces define contracts for objects in TypeScript, using a vehicle example with color, engine, and camera properties; see how objects implement the interface and validate against the contract.

Explore anonymous versus named functions, storing functions in variables, and using the fat pipe operator to write concise anonymous functions, including passing them as arguments in Angular projects.

Explore an Angular e-commerce app demo covering the home page, product catalog, discount logic, cart and checkout, and a virtual library powered by a real REST API.

Angular components are building blocks of a UI, combining HTML, a TypeScript class, and CSS under an @Component decorator; create them with ng generate component and render via their selector.

Learn how interpolation in Angular injects dynamic strings into templates using double curly braces and a class property, then render product data from a JSON file.

Explore built-in structural directives in Angular, using ngFor to dynamically render product data and enforce a strict product interface for consistent typing.

Apply ng directives to conditionally render discount messages in Angular templates using *ngFor and *ngIf when price is less than 700, and explore parent-child component communication with input and output.

Learn to create a new Angular component and connect it to its parent using @Input property binding to pass a product and render via the child selector.

Master event binding in Angular by triggering a dynamic alert with the clicked course name. Learn to move the alert from child to parent to enable data flow.

Learn to implement Angular event binding and create custom events with EventEmitter, using an output decorator to emit from child to parent and trigger parent methods.

Toggle button states with Angular property and event binding, pass the is unchanged value from parent to child via input decorator, and control the disabled attribute to demonstrate binding.

Learn to use ng-template and ng-container with ngIf and template variables to render a check availability button only when product quantity is greater than zero, else show not available message.

Discover Bootstrap, a responsive CSS framework that offers ready-made classes and JavaScript components to style forms and buttons in Angular projects, with npm installation and angular.json integration.

Restart your angular server to apply bootstrap changes, then inject a bootstrap template into the product list page and use bootstrap classes like button primary to style and bind data.

Learn to link the product details page to the product shop page using Angular's routerLink, configure routes for /products and /products/:id, and render components via router outlet.

Learn how to use Angular's activated route and route params to fetch a clicked product's id, retrieve its details, and render name, price, and description.

Leverage a free Bootstrap template to render an Angular product details page, displaying title, description, price with currency pipe, and add-to-cart plus continue shopping.

Use router link to return to products page, disable the add to cart button on click, change the label to added to cart, and display a banner via hidden property.

Implement a persistent header navigation bar with a Bootstrap template in an Angular app, placing it in the app component HTML and using routerLink for products, library, and cart.

Explore implementing a cart in Angular by creating a cart service to store selected products, inject it into components, and expose add, get, and clear cart methods.

Build a cart component in Angular, inject the cart service, call getProducts to display cart items, and wire routing to update totals as quantity changes.

Apply template reference variables and the keyup event to capture quantity, then compute the total price by multiplication and render dynamic cart rows with ngFor for real-time updates.

Learn to implement cart subtotal logic in angular by summing product prices on component init with ng-init hook and ngOnInit, and update the total when quantities change.

Implement on key up event handling in Angular to update product quantity and subtotal by passing the product and new quantity, recalculating price, and refreshing the cart total.

Update the cart total by summing subtotal and shipping in ngOnInit and on key events, and enable routerLink to products and checkout flow.

Implement remove button logic in Angular cart by using indexOf and splice to delete a product from the cart array, then recalculate totals.

Learn to build and integrate forms using Bootstrap templates and Angular, creating a checkout form component, routing, and dynamic data binding to store and display user details.

Discover how ng-model binds input, select, and textarea, enabling pre-populated forms and listening to user input for two-way data binding in Angular forms.

Submit a form with ng-form and ng-model, capture inputs into an object via a template variable, and access first name, last name, email, and password on submit.

Create a domain class to store form data (first name, last name, email) and use a contact object across components, populated from the form and confirmed with a submit alert.

Create a thank you page template in the checkout component, store form data in a class object, display entered name and email via interpolation, and toggle visibility to show confirmation.

Learn how to consume rest API data in an Angular app and render it in a table, using a dedicated library service and an http client.

Create a book details interface and cast api responses to this object, then fetch and render the data in a library dashboard using an Angular service and ngOnInit.

Add a library route and navigation to load the library component. Render book details with ng-for in a bootstrap table, binding API data via a service with HttpClient and subscribe.

Create a landing page with proper router navigations to products and library, wiring the default route to a landing component and enabling seamless navigation.