I have an Angular table
<diV class="w-100">
<app-table *ngIf="dataSource"
...
...
[columns]="columns"
[dataSource]="dataSource"
[filtre]="filtre">
</app-table>
</diV>
The .ts is
@Component({
selector: 'app-liste-emetteur',
templateUrl: './liste-emetteur.component.html',
styleUrls: ['./liste-emetteur.component.scss']
})
export class ListeEmetteurComponent extends Menu {
idRepresentantLegal: number;
titre : string = 'Emetteurs';
columns = [
{
columnDef: 'role',
header: 'Rôle',
cell: (element: any) => `${element.role != null ? element.role : ''}`},
{
columnDef: 'raisonSociale',
header: 'Raison sociale',
cell: (element: any) => `${element.raisonSociale ? element.raisonSociale + ' (' + element.ville + ')' : ''}`
},
{
columnDef: 'typeDosimetrie',
header: 'Type de dosimétrie',
cell: (element: any) => `${element.typeDosimetrie != null ? element.typeDosimetrie :''}`
},
{
columnDef: 'id_statut',
header: 'Statut',
cell: (element: any) => `${element.id_statut != null ? element.id_statut : ''}`
}
];
dataSource : PaginationDataSource<any>;
filtre : ListeEmetteursFiltre;
reinitialiserTableauSubject: Subject<void> = new Subject<void>();
constructor(private emetteurService: EmetteurService,
....
...) {
super(menuService);
this.loginService.accedant.subscribe(accedant => {
this.idRepresentantLegal = accedant.id;
this.dataSource = new PaginationDataSource(this.emetteurService);
this.filtre = new ListeAccedantsFiltre();
this.filtre.idRepresentantLegal = this.idRepresentantLegal;
this.filtre.sortByParDefaut = 'raisonSociale';
})
}
In my application there are several roles and in function of the role of the user logged in, the columns must differ : some columns are common to the two roles, and some are specific to a role
How can I code that ? Declare and use a second array named "columns2"? But how to use it then?