Angular: select a single column from a table

by

I’m still a beginner in Angular but I’m working on a complex existing project so I’m having a bit of trouble understanding everything. I have this component which allows me to create a table in which there are 4 columns for 4 packages in order to compare them. I’d like my user’s package to be framed (i.e. the whole table column). I can’t do it because my template creates all 4 columns at once, so I can’t select just the one I need. How can I do this?

Here’s the html :

<ng-template [ngIfElse]="mobileComparatifForfait" [ngIf]="produits !== undefined">
  <ng-template [ngIf]="comparatif.code_produit === 'smallillimite' || comparatif.code_produit === 'mediumillimite' || comparatif.code_produit === 'largeillimite' || comparatif.code_produit === 'allillimite'">
    <ng-template [ngIf]="comparatif.is_texte">
      <td class="hover-border selectedrow-mid-black">
        <ng-template [ngIf]="comparatif.actif">
          <span [ngStyle]="{'color': comparatif.couleur}">{{ comparatif.texte }}</span>
        </ng-template>
      </td>
    </ng-template>
    <ng-template [ngIf]="comparatif.is_coche">
      <ng-template [ngIfElse]="coche" [ngIf]="comparatif.is_checked">
        <td [ngClass]="{ 'hover-border': comparatif.actif, 'selectedrow-mid-black': comparatif.actif }">
          <ng-template [ngIf]="comparatif.actif">
            <img alt="inclus" src="/assets/images/SVG_icons/cardcheck_green.svg">
          </ng-template>
        </td>
      </ng-template>
      <ng-template #coche>
        <td class="hover-border selectedrow-mid-black">
          <ng-template [ngIf]="comparatif.actif">
            <img alt="non inclus" src="/assets/images/SVG_icons/comp_uncheck.svg">
          </ng-template>
        </td>
      </ng-template>
    </ng-template>
  </ng-template>
</ng-template>

Here’s the css I’ve already done :

.selectedrow-mid-black {
  border-right: 2px solid var(--fp-dark);
  border-left: 2px solid var(--fp-dark);
}

.selectedrow-top-black {
  border-right: 2px solid var(--fp-dark);
  border-left: 2px solid var(--fp-dark);
  border-top: 2px solid var(--fp-dark);
}

Thank you in advance if you take the time to answer and help me.

You can add a dynamic class to the <td> element based on whether it is the user’s package or not.

<ng-template [ngIfElse]="mobileComparatifForfait" [ngIf]="produits !== undefined">
  <ng-template [ngIf]="comparatif.code_produit === 'smallillimite' || comparatif.code_produit === 'mediumillimite' || comparatif.code_produit === 'largeillimite' || comparatif.code_produit === 'allillimite'">
    <ng-template [ngIf]="comparatif.is_texte">
      <td [ngClass]="{'selectedrow-mid-black': isUserPackage()}">
        <ng-template [ngIf]="comparatif.actif">
          <span [ngStyle]="{'color': comparatif.couleur}">{{ comparatif.texte }}</span>
        </ng-template>
      </td>
    </ng-template>
    <ng-template [ngIf]="comparatif.is_coche">
      <ng-template [ngIfElse]="coche" [ngIf]="comparatif.is_checked">
        <td [ngClass]="{'selectedrow-mid-black': isUserPackage()}">
          <ng-template [ngIf]="comparatif.actif">
            <img alt="inclus" src="/assets/images/SVG_icons/cardcheck_green.svg">
          </ng-template>
        </td>
      </ng-template>
      <ng-template #coche>
        <td [ngClass]="{'selectedrow-mid-black': isUserPackage()}">
          <ng-template [ngIf]="comparatif.actif">
            <img alt="non inclus" src="/assets/images/SVG_icons/comp_uncheck.svg">
          </ng-template>
        </td>
      </ng-template>
    </ng-template>
  </ng-template>
</ng-template>

The [ngClass] directive is used to dynamically set the class based on the isUserPackage() function.

isUserPackage(): boolean {
  return (
    this.comparatif.code_produit === 'smallillimite' ||
    this.comparatif.code_produit === 'mediumillimite' ||
    this.comparatif.code_produit === 'largeillimite' ||
    this.comparatif.code_produit === 'allillimite'
  );
}

Leave a Comment