I am trying to build a webapp which is responsive for all devices. I am using angular material for designing. In this particular component I am using mat-table and I want to hide the ticket column for android devices. I have tried fxHide fxShow.gt-sm but It didn't work. Can anyone guide me?

<mat-card>
  <mat-card-content>
    <mat-table [dataSource]="dataSource">
      <!-- User name Definition -->
      <ng-container matColumnDef="ticketnumber">
        <mat-header-cell *matHeaderCellDef> Ticket No. </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.ticketnumber}} </mat-cell>
      </ng-container>
    
      <!-- player Definition -->
      <ng-container matColumnDef="player">
        <mat-header-cell *matHeaderCellDef> Player </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.player}} </mat-cell>
      </ng-container>
    
      <!-- booked Definition -->
      <ng-container matColumnDef="booked">
        <mat-header-cell *matHeaderCellDef> Booked By </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.booked}} </mat-cell>
      </ng-container>
      
 

// I want to hide this particular ticket column below on mobile devices. I have tried using angular flex layout <div fxHide fxShow.gt-sm> but it didn't work. I don't know how to use mediaObserver properly. Can anyone guide me? 
  

<ng-container matColumnDef="tickets">
        <mat-header-cell *matHeaderCellDef> Ticket </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.tickets}} </mat-cell>
      </ng-container>
    
      <!-- Header and Row Declarations -->
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
    </mat-table>
  </mat-card-content>
</mat-card>

Here's my ts file. I don't know how to use mediaObserver properly as I am learning through it.

import {Component, OnDestroy, OnInit} from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { Subscription } from 'rxjs';



@Component({
  selector: 'ancode-tickets',
  templateUrl: './tickets.component.html',
  styleUrls: ['./tickets.component.scss']
})
export class TicketsComponent implements OnInit, OnDestroy{
  
  displayedColumns : string[] = ['ticketnumber', 'player', 'booked','tickets'];
  currentScreenWidth: string = '';
  flexMediaWatcher: Subscription;


  dataSource = [{
    ticketnumber : "1",
    player: 25,
    booked: "Admin",
    tickets: [1,2,3,4]
  },
  {
    ticketnumber : "2",
    player: 29,
    booked: "Admin",
    tickets : [5,6,7,8]
  }
]

constructor(private media$: MediaObserver) {
   
};


  ngOnInit(): void {
    this.flexMediaWatcher = this.media$.subscribe((change: MediaChange) => {
      if (change.mqAlias !== this.currentScreenWidth) {
          this.currentScreenWidth = change.mqAlias;
        ;
      }
  });
  }
  ngOnDestroy(): void {
    
  }
}

CodePudding user response：

You can use *ngIf.

For that, you have to put the *ngIf on the element inside the th/td

CodePudding user response：

Wanted to display the org detail only if the user is 'superadmin'

<ng-container matColumnDef="organization">       
  <th mat-header-cell *matHeaderCellDef mat-sort-header>         
    <span *ngIf="currentUser?.organization.role == 'superadmin'">
      Organization
    </span>       
  </th>       
  <td mat-cell *matCellDef="let element">            
    <span *ngIf="currentUser?.organization.role == 'superadmin'">
      {{element.organization.name ? element.organization.name : '-'}}
    </span>       
  </td>     
</ng-container>