<table mat-table [dataSource]="dataSource" class="message-element-interface-table-view-element mat-elevation-z9 message-element-interface-table-view-width-100">
    <ng-container [matColumnDef]="subHeader" *ngFor="let subHeader of subMessageHeaders;let j=index;trackBy:valueTracker">
     <th mat-header-cell *matHeaderCellDef class="message-element-interface-table-view-sub-message-header">{{subHeader | convertMessageInterfaceTitlesToString}}</th>
     <td mat-cell *matCellDef="let value" class="message-element-interface-table-center">
        <ng-container *ngIf="editMode===true; else no_edit">
            <ng-container *ngIf="subHeader==='platformTypeName2'">
                <osee-messaging-edit-element-field [header]="subHeader" [structureId]="element.id" [elementId]="value['id']" [elementStart]="value['interfaceElementIndexStart']" [elementEnd]="value['interfaceElementIndexEnd']" [value]="value['platformTypeName2'].toString()"></osee-messaging-edit-element-field>
            </ng-container>
            <ng-container *ngIf="subHeader!=='platformTypeName2'">
                <osee-messaging-edit-element-field [header]="subHeader" [structureId]="element.id" [elementId]="value['id']" [elementStart]="value['interfaceElementIndexStart']" [elementEnd]="value['interfaceElementIndexEnd']" [value]="value[subHeader]"></osee-messaging-edit-element-field>
            </ng-container>
        </ng-container>
        <ng-template #no_edit>
            <div *ngIf="subHeader==='description'||subHeader==='EnumLiteralsDesc'||subHeader==='Notes'" [matTooltip]="value[subHeader]" [matTooltipDisabled]="value[subHeader].length<15" appHighlightFilteredText [searchTerms]="filter" [text]="value[subHeader] | displayTruncatedStringWithFieldOverflow:15" classToApply="ple-message-element-interface-table-highlighted-text">
            </div>
            <div *ngIf="subHeader!=='Notes' &&subHeader!=='platformTypeName2' && subHeader!=='name' && subHeader !=='description'" appHighlightFilteredText [searchTerms]="filter" [text]="value[subHeader]" classToApply="ple-message-element-interface-table-highlighted-text">
                <!-- subHeader!=='description'&&subHeader!=='EnumLiteralsDesc'&& -->
                {{value[subHeader]}}
            </div>
            <div *ngIf="subHeader==='name'">
                <ng-container *ngIf="value['interfaceElementIndexEnd']-value['interfaceElementIndexStart']>0">
                    {{value[subHeader]+"["+value['interfaceElementIndexStart']+"..."+value['interfaceElementIndexEnd']+"]"}}
                </ng-container>
                <ng-container *ngIf="value['interfaceElementIndexEnd']-value['interfaceElementIndexStart']<=0">
                    {{value[subHeader]}}
                </ng-container>
            </div>
            <ng-container *ngIf="subHeader==='platformTypeName2'">
                <button mat-stroked-button (click)="navigateTo(value[subHeader])" (contextmenu)="openMenu($event,value[subHeader])">
                    {{value[subHeader]}}
                </button>
            </ng-container>
        </ng-template>
     </td>
    </ng-container>
    <ng-container matColumnDef="footer">
        <td mat-footer-cell *matFooterCellDef [attr.colspan]="subMessageHeaders.length" style="text-align:right">
            <ng-container *ngIf="editMode===true;">
                <button mat-mini-fab color="primary" (click)="openAddElementDialog()">+</button>
            </ng-container>
         </td>
    </ng-container>
 <tr mat-header-row *matHeaderRowDef="subMessageHeaders; sticky:true"></tr>    
 <tr mat-row *matRowDef= "let row2; columns: subMessageHeaders; let k=index;"
 [ngClass]="k%2===0? 'message-table-sub-element-row-even':'message-table-sub-element-row-odd'"></tr>
 <tr mat-footer-row *matFooterRowDef="['footer']"></tr>
</table>
<mat-menu #contextMenu="matMenu">
    <ng-template matMenuContent let-location="location">
        <button mat-menu-item (click)="navigateToInNewTab(location)"> Open in new tab</button>
    </ng-template>
</mat-menu>
<div style="visibility: hidden; position: fixed;" 
[style.left]="menuPosition.x" 
[style.top]="menuPosition.y" 
[matMenuTriggerFor]="contextMenu"></div>