在 Angular8 中单击按钮隐藏和显示 html 表中的多列

Question

I have to toggle show and hide multiple columns in a html table. Currently i can show and hide column2. BUt i want to hide and show multiple columns say column 3 and 4 and 6 with the click and also toggle the button name between show and hide. or IS there any easy way to handle this in angular 8?

Below is my table

html

 <button onclick='document.getElementById("foo").classList.toggle("hide2")'>Show/hide</button>

 <table  id="foo" class="table table-sm fs-13px mt-2 mb-5">
          <tr>
            <th class="text-danger fw7 pl-0" colspan="6">
              TABLE 1
            </th>
          </tr>
          <tr>
            <th class="text-nowrap pr-3 pl-0 sticky-header">Year
            </th>
            <th class="text-nowrap pr-3 sticky-header">Platform
            </th>
            <th class="text-nowrap pr-3 sticky-header">Name
            </th>
            <th class="text-nowrap pr-3 sticky-header">Variants
            </th>
            <th class="text-nowrap pr-3 sticky-header">Program
            </th>
            <th class="w-100 sticky-header"></th>
          </tr>
          <tr *ngFor="let u of apiData.unassigned">
            <td class="text-nowrap pr-3 pl-0">
              {{ u.year }}
            </td>
            <td class="text-nowrap text-danger pr-3">
              Not Assigned
            </td>
            <td class="text-nowrap pr-3">
              {{ u.modelName }}
            </td>
            <td class="text-nowrap pr-3">
              {{ u.unassignedVariantCount }}
            </td>
            <td class="text-nowrap pr-3">
              {{ u.programCode }}
            </td>
            <td></td>
          </tr>
          <tr>
            <td colspan="6">&nbsp;
            </td>
          </tr>
        </table>

css code

#foo.hide2 tr > *:nth-child(2) {
    display: none;
}

Answer 1

Found a solution in Angular with boolean variable and scss class turning it on and off like below:

.Html file

 <button class="mr-2 mb-1" [class.rs-inactive]="!showPlatformDetail" [class.rs-active]="showPlatformDetail" (click)="showPlatformDetail=!showPlatformDetail">&nbsp;{{showPlatformDetail ? 'Show Detail' : 'Hide Detail'}}&nbsp;</button>

 <table id="platforms" class="table table-sm fs-13px mt-2 mb-5" [class.platform-detail]="showPlatformDetail">
 <tr>
            <th class="text-danger fw7 pl-0" colspan="6">
              TABLE 1
            </th>
          </tr>
          <tr>
            <th class="text-nowrap pr-3 pl-0 sticky-header">Year
            </th>
            <th class="text-nowrap pr-3 sticky-header">Platform
            </th>
            <th class="text-nowrap pr-3 sticky-header">Name
            </th>
            <th class="text-nowrap pr-3 sticky-header">Variants
            </th>
            <th class="text-nowrap pr-3 sticky-header">Program
            </th>
            <th class="w-100 sticky-header"></th>
          </tr>
          <tr *ngFor="let u of apiData.unassigned">
            <td class="text-nowrap pr-3 pl-0">
              {{ u.year }}
            </td>
            <td class="text-nowrap text-danger pr-3">
              Not Assigned
            </td>
            <td class="text-nowrap pr-3">
              {{ u.modelName }}
            </td>
            <td class="text-nowrap pr-3">
              {{ u.unassignedVariantCount }}
            </td>
            <td class="text-nowrap pr-3">
              {{ u.programCode }}
            </td>
            <td></td>
          </tr>
          <tr>
            <td colspan="6">&nbsp;
            </td>
          </tr>
</table>

.scss file

.platform-detail > tr > *:nth-child(7),
.platform-detail > tr > *:nth-child(8),
.platform-detail > tr > *:nth-child(10),
.platform-detail > tr > *:nth-child(11),
.platform-detail > tr > *:nth-child(13),
.platform-detail > tr > *:nth-child(15) {
  display: none;
}

.ts file

  showPlatformDetail = true;