Understand the concept of Child and Parent Components with Input Tag

Angular Fundamentals from Scratch & Unit/Integration Testing

Introduction to Angular & Course FAQ's

TypeScript Fundamentals for Beginners

What is Typescript? How different it is from JS? (5:38)
Importance of Let and Const keywords in Typescript (17:06)
Types Usage in Typescript (12:34)
Understanding Classes,Methods and objects in Typescript (14:23)
Importance of Constructor in Typescript (10:22)
Exports,Imports and Functions usage in Typescript (11:47)
Interfaces and objects Importance in defining contracts (17:04)
Usage of Pipes for Anonymous Functions (10:43)
Code Download

Building Angular Components for App development

Demo of the App which we will develop in this course (7:00)
Where to download code files
Install Angular CLI dependencies and create the Project (7:50)
What are Angular Components? Understand how to create one (14:40)
What is Interpolation in Angular and how this can be used (8:24)
How to display Array of items into HTML with Angular Interpolation (6:40)

Structural Directives and ng Directives for Parent Child component relation

What are Built in Structural Directives and how it helps in populating data (12:12)
What are ng-directives and how it helps to put conditions in HTML (9:43)
Understand the concept of Child and Parent Components with Input Tag (10:21)
Example of Input and Output Directives to communicate with parent and child (9:36)
Understand the Event Binding and how to create Custom Events (16:09)
Updating HTML Attributes of Angular with the Property and event Binding (12:16)

BootStrap CSS to bring Styling to Angular Component HTML Pages

Angular Routing for Page Navigations and Data Session Storage

What is Angular Routing and how it helps to navigate between pages (11:25)
Add Router Link to the Product details page to land on Product Shop page (13:55)
Implementing Route Params to get the specific Product date to render (12:45)
Get Bootstrap template to display Product Details page into Angular html (11:35)
Implement Add to Cart functionality and change Button properties on Select (14:13)
Implement Website Header Navigation Bars with Bootstrap template (6:53)

Injecting Angular Service Providers for Data into Components

Understanding Angular Services and implementing process into Framework (11:09)
Build Cart Component and consume the date from Angular Service (6:40)
What are Template reference variables? And KeyUp event to listen user Input (15:23)

Build Functional logic into Component methods and dynamically update from HTML

Implemeting Logic to retrieve Product Price from ng-init hook (7:07)
Implement logic to update the Product Quantity using ONKEY Event (7:51)
Implement logic to update the Product Total and apply routerLink to Checkout (6:11)
Implment logic for Removing Products from the Cart and cleanup the code (11:20)

Create Angular Forms with ng-model two way Binding Directives

Consuming HTTP Rest Service Json data into Angular Components to render

Creating Thankyou Page Template and implement toggling to Hide and unhide (9:47)
How to Consume Rest API"s data into Angular App - Example (12:26)
Created Book Interface to cast the API response to the book object (12:54)
Implement Library Page with Table using ng-for directive and API data (12:09)
Build Home page to App with proper router Navigations to respective pages (7:42)

Unit Testing the Angular Components with Angular Test Bed Utilities

Introduction to Angular Unit /Integration Testing and its types (13:12)
What is Karma and Angular Test Bed and how it used for White box testing (14:30)
Build Unit Test for the method defined in the component classes (10:12)
Configuring Test Bed and creating HTML fixture to render the html on fly (10:02)
Test the Alert Details Component with ng-if condition logic validation (13:35)
How to load Stub Data into instance to test component in isolated way (7:04)

Use Stub Data for Testing Input Output Directives in the Angular Framework

Testing Input Output Event emmitters with Stub data required for the component (8:21)
Create Mock Service class for Cart data to Test Cart component in isolated (7:58)
Perform Integration testing by viewing the results on browser with nativeElement (15:39)
Use SPY object to Implement Tests for Library Dashboard component (9:36)

Integration Testing to test the components on UI & SPY object Usage

Use return value for created Spy object and inject into Test Data as Mocking (10:43)
Implement validations on Angular Forms and test on the browsers (10:24)
Understand how to fire DispatchEvents with QuerySelector for Integration testing (17:38)

Project Code Download

Lesson content locked

If you're already enrolled, you'll need to login.