Angular Unit testing- 13 | Unit Testing on ngFor | Testing Different ways of ngFor execution

In this video you will learn How to test ngFor in angular. How to test different ways of ngFor in angular. How to test the ngFor rendering in angular. Testing with ng container and ng template with ngFor in angular.

Topics Covered:

1. ngFor
2. ngFor with ng template
3. ngFor with ng container
4. ngFor dynamic rendering
5. ngFor with complex arrays
6. ngFor with dynamic complex arrays (adding details to array).

Mandatory to watch before watching unit testing for better understanding:
(Angular ngFor Rendering)

Recommend you to watch my previous videos for more information and the context.

For Attribute Binding testing:

For Testing style bindings:

For Testing class binding

For Tetsing property binding

For interpolation unit testing

Different Types of Data binding

Interpolation in angular

For Component introduction check the below link

Angular Installation and setup

For ng serve mechanisum and internal flow of angular follow the link below

Angular Modules

Angular Tutorial playlist:

Medium:

For Angular 12 features, Please check the below playlist

Basic Software concepts

For Angular Unit Testing, Please check the below playlist

Instagram:

[vidhyaprabhav]

Hi i have a doubt what if the {{}} is inside a p tag or h tag

[dongnguyenvan]

Thank you. This video is wonderful for starter like me.
Also, can you help me resolve this problem? I assigned the programList by my data and assign the loadingState to LOADED but looks like the UI is not updated so I can't query my elements.

1 it('on select a program item then item is activated', (() => {
2
3 component.programList = programs;
4 component.loadingState = 'LOADED';
5 fixture.detectChanges();
6
7 fixture.whenStable().then(() => {
8 const checkboxElements: DebugElement[] =
9 console.log('checkboxElements', checkboxElements); //0
10
11 });
12 }));