I have two components,
This component have, angular material button toggle and sample data.
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
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);