Afficher une <td> (cachée)

Version imprimable

13/10/2021, 23h48
Tamzoro

Afficher une <td> (cachée)

Bonjour,

Voici un tableau HTML avec des données, lorsque l'utilisateur clique sur un nombre qui se situe dans les cellules grisées (donc pour cette exemple 32 ou 47). Un second tableau devrait s'afficher avec deux colonnes.

https://zupimages.net/up/21/41/oudb.png

Comment je pourrais faire ça avec Angular ? Sur Stackblitz, j'ai juste su crée le tableau HTML. Je bloque carrément là.

https://stackblitz.com/edit/angular-...component.html

Si vous avez une idée je suis intéressé.

Un grand merci
14/10/2021, 00h10
krakatoa

ou doit s'afficher le tableau ?
14/10/2021, 00h37
Tamzoro

Le second tableau doit s'afficher sur les cellules grisées. Donc si tu cliques par exemple sur 32, un tableau doit apparaître avec 2 colonnes par exemple nom et prénom. Je ne sais pas si c'est clair?
14/10/2021, 10h09
Tamzoro

Bonjour,

J'ai amélioré mon ancien code, lorsque je clique sur 32 j'affiche bien un nouveau tableau, sauf qu'il est tout en bas. J'aimerai juste qu'il soit en dessus de la première ligne.

https://zupimages.net/up/21/41/jf0z.png

Si vous avez une idée, je suis preneur, le lien Stackblitz est toujours le même mais le voici au cas où.

https://stackblitz.com/edit/angular-...component.html

plusieurs façons :

(1)

toggle(1)
*ngIf="selectedArr[1]

1 est un indice, il sera unique et diffèrent pour chaque case

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <td scope="col" style="width: 12%; background-color: #dee2e657;">
      <button (click)="toggle(1)" id="bt">{{ 32 }}</button>
      <ng-container
        *ngIf="selectedArr[1]"
        [ngTemplateOutlet]="identityTpl"
        [ngTemplateOutletContext]="{ name: 'toto', firstname: 'joe' }"
      >
      </ng-container>
    </td>
 
...
...
<ng-template #identityTpl let-name="name" let-firstname="firstname">
  {{ name }} / {{ firstname }}
</ng-template>

Code:

1
2
3
4
5
6
...
  selectedArr = <boolean[]>[];
...
  toggle(indice: number) {
    this.selectedArr [indice] = !this.selectedArr [indice];
  }

(2) créer un composant app.identity.ts :

Code:

1
2
3
4
<td scope="col" style="width: 12%; background-color: #dee2e657;">
      <button (click)="toggle(1)" id="bt">{{ 32 }}</button>
       <app-identity *ngIf="selectedArr[1]" [name]="name" [firstName]="firstName"></app-identity>
</td>

(3)
avec une directive...

par code en fonction de la condition, tu ajoutes ou pas le DOM du tableau à l'emplacement de la directive

14/10/2021, 10h50
Tamzoro

Bonjour dukoid,

Merci d'avoir consacré ton temps à mon problème. Je viens de résoudre mon souci encore merci.