Currently, I am developing an Angular application focused on creating a COVID-19 tracking app.
In this project, I have designed 2 components - Component A displays a list of all states, while Component B lists all districts within a particular state.
To view my work so far, you can visit my StackBlitz link here.
The expected output for my app is similar to the layout found at this link.
When working on this project, I referred to a solution on Stack Overflow which can be found here.
My current challenge involves displaying data in table format. When a state is clicked, it should show all the relevant information, and clicking it again should close that section. Similarly, if another state is selected, the district under that state should be displayed.
However, I am facing issues with where to place my
<app-componentB></app-componentB>Below is a snippet of my code:
componentA.html
<tbody *ngFor="let data of statewisedata;let i=index">
<span class="dropdown rotateDownRight"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
<tr class="state">
<td (click)="OngetState(data.state)" style="font-weight: 600;">{{data.state}}</td>
<td style="color: inherit;">{{data.confirmed}}
<span *ngIf='DailystateStatus[i]?.confirmed !==0 || DailystateStatus[i]?.confirmed < 0 ;' class="deltas" style="color: rgb(255, 7, 58);"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg> {{DailystateStatus[i]?.confirmed}}</span>
</td>
<td style="color: inherit;">{{data.active}}</td>
<td style="color: inherit;">{{data.recovered}}</td>
<td style="color: inherit;">{{data.deaths}}</td>
</tr>
<app-district *ngIf="!showDistrict"></app-district>
</tbody>
componentA.ts
showDistrict=true
OngetState(state) {
this.cs.getState(state)
this.cs.getDataDistrictWise(state)
this.showDistrict=!this.showDistrict
}