hidden directive is not showing hidden elements after condition changed, in angular 9

Question

I have two components,

1. app component:

This component have, angular material button toggle and sample data.

2. results component:

This component list the data, that are passed by app component.

Toggle button have two options, "All" and "Fail only", while click "All" it should show all data, while clicking "Fail only" it should show failed data only.

My issue is, after clicking "Fail only" option, it showing failed data only, but while clicking "All" option, it is not showing all data, it showing only failed data.

Note: I need achieve this without modifying component structure, data flow and HTML skeleton.

I created this project in stackblitz, please find the below link.

https://stackblitz.com/edit/angular-vjiuyc?file=src/results/results.component.html

Answer 1

Data passed from html value field is a string. Your comparison should happen something like this:

[hidden]="showFailOnly==='true'"

A simple way to debug such issues is by logging your values and their types

console.log(value, typeof value);