Single static object in Material Table DataSource

Question

Is it possible to pass a single static object rather than a list of User information in Material Table DataSource?

User object with data - {idUser:1, lastName: "xyz", firstName: "abc" }

Where idUser is taken from a URL parameter.

And display using the Material table with multiple "mat-cell" tags.

Example: Html file contains

<mat-table #table *ngIf="userInfo">

        <ng-container matColumnDef="label"> 
            <mat-header-cell *matHeaderCellDef>Label</mat-header-cell>
            <mat-cell *matCellDef>Id User</mat-cell>
            <mat-cell *matCellDef>First Name</mat-cell>
            <mat-cell *matCellDef>Last Name</mat-cell>
        </ng-container> 
        <ng-container matColumnDef="value"> 
            <mat-header-cell *matHeaderCellDef>Value</mat-header-cell>
            <mat-cell *matCellDef="let userInfo">{{userInfo.iduser}}</mat-cell>
            <mat-cell *matCellDef="let userInfo">{{userInfo.lastname}}</mat-cell>
            <mat-cell *matCellDef="let userInfo">{{userInfo.firstname}}</mat-cell>
        </ng-container> 

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

Component.ts contains :

userInfo: User;
idUser: number;
dataSource;
statusMsg = 'xyz';
displayedColumns = ['label', 'value'];

ngOnInit(): void {

    // Subscribing for the Routing - URL params       
    this.activatedRoute.queryParams.subscribe(params => {
        this.idUser = params['idUser'];
      });

    /// Subscribing for the User table DataSource 
this.userService.getUser(this.idUser)
    .subscribe((resultArray: User) => {
        if (!resultArray) {
            return console.log("no results !");
        }

            console.log(resultArray);
        this.dataSource.data = new MatTableDataSource(resultArray); 

    });
}

User service contains:

 private userInfoUrl = 'http://localhost:8080/users/getUsersInfo?idUser=';

 constructor(private http: HttpClient) { }

 // Service method for getting information on specific User
 getUser(iduser: number): Observable<User> {
        return this.http.get<User>(this.userInfoUrl + iduser)
          .catch(this.handleError);
    }

I am having a single user's information and just want to pass it to the material table. — Apb
if you have only single data to display I would suggest not to use material table. — Anshuman Jaiswal
@AnshumanJaiswal yes.. thank you :) but just wanting to know if it is possible. — Apb

Anshuman Jaiswal Anshuman Jaiswal · Accepted Answer · 2018-03-28T12:41:32

I found few things in your code as:

In HTML

Missing dataSource in table, you will have to do it in this way:

<mat-table #table [dataSource]="dataSource" *ngIf="userInfo">
    <ng-container matColumnDef="idUser">
      <mat-header-cell *matHeaderCellDef> Id User </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.idUser}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.firstName}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Component.ts

displayedColumns = ['idUser', 'firstName', 'lastName'];
ngOnInit(): void {

    // Subscribing for the Routing - URL params       
    this.activatedRoute.queryParams.subscribe(params => {
        this.idUser = params['idUser'];
    });

    /// Subscribing for the User table DataSource 
    this.userService.getUser(this.idUser).subscribe((resultArray: User) => {
        if (!resultArray) {
            return console.log("no results !");
        }

        console.log(resultArray);
        this.dataSource = new MatTableDataSource(resultArray);
        //you can also use
        //this.dataSource = resultArray;

    });
}

Single static object in Material Table DataSource

1 Answers