<tbody *ngFor="let category of categories">
            <tr (click)="collapse(category)">
                <td>
                    <i *ngIf="!category.expanded" style="width: 15px;height: 15px;"
                        class="material-icons">keyboard_arrow_right</i>
                    <i *ngIf="category.expanded" style="width: 15px;height: 15px;"
                        class="material-icons">keyboard_arrow_down</i>
                </td>
                <td>Catégorie : {{category.category.categoryCode}}</td>
                <td>{{category.category.categoryWording}}</td>
                <td>
                    <div id="Action" class="btn-group dropright" role="group">
                        <button id="btnGroupDrop1" type="button" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false">
                            <i class="material-icons">more_vert</i>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                            <a class="dropdown-item"
                                routerLink="/../contractTypes/detail/create/subcategory/{{category?.category.category_Id}}">Ajouter
                                une sous-catégorie</a>
                            <a class="dropdown-item"
                                routerLink="/contractTypes/detail/{{category?.contractType_Id}}/category/update/{{category?.category.category_Id}}">Modifier
                                la catégorie</a>
                            <a class="dropdown-item" (click)="AffecterDelete(category.category_Id)" data-toggle="modal"
                                data-target="#Modal" data-placement="top" title="Supression">Supprimer</a>
                        </div>
                    </div>
                </td>
            </tr>
            <ng-container *ngFor="let subcategory of subcategories">
                <tr *ngIf="subcategory.category_Id === category.category.category_Id && category.expanded"
                    style="background-color:#ECF1F6;">
                    <td colspan="3" style="padding-left: 50px;">
                        Sous-catégorie : {{subcategory.subCategory.subCategoryWording}}
                        ({{subcategory.subCategory.subCategoryType}}) id :{{subcategory.subCategory.subCategory_Id}}
                    </td>
                    <td>
                        <div id="Action" class="btn-group dropright" role="group">
                            <button id="btnGroupDrop1" type="button" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                                <i class="material-icons">more_vert</i>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                <a class="dropdown-item"
                                    routerLink="/contractTypes/detail/{{category?.contractType_Id}}/category/update/{{category?.category.category_Id}}">Modifier
                                    la sous-catégorie</a>
                                <a class="dropdown-item" (click)="AffecterDelete(category.category_Id)"
                                    data-toggle="modal" data-target="#Modal" data-placement="top"
                                    title="Supression">Supprimer</a>
                            </div>
                        </div>
                    </td>
                </tr>
                <ng-container *ngFor="let valuelist of valuesList">
                    <tr *ngIf="valuelist.subCategory_Id === subcategory.subCategory.subCategory_Id && category.expanded">
                        <td>
                            {{valuelist.subCategory_Id}} et {{subcategory.subCategory_Id}}
                        </td>
                    </tr>
                </ng-container>
            </ng-container>
        </tbody>