Discussion :

[Tamzoro]

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.



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

[krakatoa]

ou doit s'afficher le tableau ?

[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?

[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.



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

[dukoid]

plusieurs façons :

(1)

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Tamzoro]

Bonjour dukoid,

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