Discussion :

[Sparky95]

Bonjour,

je cherche à créer un mat-table avec des définitions de colonnes déjà pres défini car utilisés à plusieurs endroits.

parent Component

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!-- displayedColumns: string[] = ['firstName', 'lastName', 'actions']-->
<app-table [data]="users" [displayedColumns]="displayedColumns" [busy]="busyLoading">
    <!-- action -->
<ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>{{'COMMON.ACTION'}}</th>
        <td mat-cell *matCellDef="let row">
        <button type="button" [routerLink]="['/users/' + row.id]">edit</button>
        </td>
    </ng-container>

</app-table>

app-table component

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
16
17
18
19
20
<table mat-table [dataSource]="dataSource">
    <ng-container matColumnDef="firstName">
        <th scope="col" mat-header-cell *matHeaderCellDef>{{'USER.FIRST_NAME' | translate}}</th>
        <td mat-cell *matCellDef="let row">{{row.firstName}}</td>
    </ng-container>

    <!-- serialNumber -->
<ng-container matColumnDef="lastName">
        <th scope="col" mat-header-cell *matHeaderCellDef>{{'USER.LASTE_NAME' | translate}}</th>
        <td mat-cell *matCellDef="let row">{{row.lastName}}</td>
    </ng-container>

    <!-- what I'm trying to do -->
<ng-content></ng-content>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

<!-- ERROR Error: Could not find column with id "actions" -->


J'essayes donc de définir certaines colonnes dans un parent, passer ces définitions par le biez de ng-content à l'enfant, en l'occurrence app-table.
et ensuite affiches ces colonnes comme si le code avait était écrit dans l'enfant, un peu comme si le code passé en paramètre, avait été l'équivalent d'un include d'un morceau de text

Auriez vous une idée de comment procéder ?

Merci d'avance

[Sparky95]

Voici un nouveau test de projet histoire de rendre la lecture plus complète et plus propre

parent

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<!-- parent.component.html -->
<h1>Parent Component</h1>
<app-user-list [dataSource]="users" [displayedColumns]="displayedColumns">
    <!-- Custom columns for UserListComponent -->
<ng-container matColumnDef='lastname'>
        <th mat-header-cell *matHeaderCellDef>Last Name</th>
        <td mat-cell *matCellDef="let user">{{ user.lastname }}</td>
    </ng-container>
</app-user-list>

Code typescript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, Input } from '@angular/core';

interface User {
    id: number;
    firstname: string;
    lastname: string;
}

@Component({
    selector: 'app-parent',
    templateUrl: './parent.component.html',
    styleUrls: ['./parent.component.scss']
})
export class ParentComponent {

    users: User[] = [
        { id: 1, firstname: 'John', lastname: 'Doe' },
        { id: 2, firstname: 'Jane', lastname: 'Smith' },
        { id: 3, firstname: 'Alice', lastname: 'Johnson' },
        { id: 4, firstname: 'Bob', lastname: 'Brown' },
    ];
displayedColumns: string[] = [
        'id',
        'firstname',
        'lastname'
];

    constructor() { }
}

enfant

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
16
17
18
19
20
21
22
23
24
25
26
<!-- user-list.component.html -->
<mat-card>
    <mat-card-header>
        <mat-card-title>User List</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <table mat-table [dataSource]="dataSource">
            <!-- Default columns (ID and First Name) -->
<ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef>ID</th>
                <td mat-cell *matCellDef="let user">{{ user.id }}</td>
            </ng-container>
            <ng-container matColumnDef="firstname">
                <th mat-header-cell *matHeaderCellDef>First Name</th>
                <td mat-cell *matCellDef="let user">{{ user.firstname }}</td>
            </ng-container>

            <!-- Custom columns (added using ng-content) -->
<ng-content select="[matColumnDef='lastname']"></ng-content>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
    </mat-card-content>
</mat-card>

Code typescript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, Input } from '@angular/core';


@Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html',
    styleUrls: ['./user-list.component.scss']
})
export class UserListComponent {
    @Input() dataSource: any;
    @Input() displayedColumns: string[] = [];

    constructor() { }
}