CODEWITHSUNDEEP
angulartypescriptangular-materialangular-material-table
touinta
touinta

Reputation: 1031

display category name instead id in mat table angular

Hello I use angular material mat table so to display my data from an api. I use another api so to handle the Categories. I have two models, issues and categories. For the time I display the ID of the category. I need to display the corresponding category name instead of its id.

Any idea?

My models

export class Issue {
  IssueID: string;
  IssueTitle: string;
  IssueContent: string;
  CategoryID: number;
}


export class IssueCategory {
  public CategoryID: number;
  public CategoryName: string;
}

My html

...
  <ng-container matColumnDef="CategoryTitle">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Category</mat-header-cell>
    <mat-cell *matCellDef="let row">{{row.categoryID}}</mat-cell>
  </ng-container>
...

EDIT

My getAllIssues()

CategoryArray: TicketCategory[] = [];

getAllIssues(): void {
this.httpClient.get<Ticket[]>(this.API_URL).subscribe(data => {
this.dataChange.next(data);      

  this.data.map(issue => ({

    category: this.CategoryArray.find(category => category.CategoryID === issue.CategoryID)
  }));
  }
 }

thank you!

Upvotes: 0

Views: 1921

Answers (1)

Valeriy Katkov
Valeriy Katkov

Reputation: 40552

As the simplest approach you can use already combined data as the data source, for example:

// my-component.ts

@Component(...)
export class MyComponent {
  readonly categories: IssueCategory[] = [{
    CategoryID: 1,
    CategoryName: "First Category"
  }, {
    CategoryID: 2,
    CategoryName: "Second Category"
  }];

  readonly issues: Issue[] = [
    {IssueID: "first", IssueTitle: "First Issue", IssueContent: "first issue content", CategoryID: 1},
    {IssueID: "second", IssueTitle: "Second Issue", IssueContent: "second issue content", CategoryID: 2}
  ];

  readonly dataSource = this.issues.map(issue => ({
    title: issue.IssueTitle,
    content: issue.IssueContent,
    category: this.categories.find(category => category.CategoryID === issue.CategoryID)
  }));
}

Or you can create a pipe which transforms a category id to the name. In this case keep in mind that you should include your pipe in the declarations array of an module.

// category-by-id.pipe.ts

@Pipe({
  name: 'categoryById'
})
export class CategoryByIdPipe implements PipeTransform {
  transform(categoryId: number, categories: IssueCategory[]): string {
    const category = categories.find(category => category.CategoryID === categoryId);
    return category ? category.CategoryName : "";
  };
}

<!-- my-component.html -->

...
  <ng-container matColumnDef="category">
    <mat-header-cell *matHeaderCellDef> Category </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.CategoryID | categoryById:categories}} </mat-cell>
  </ng-container>
...

StackBlitz with both examples. Hope it helps you.

Here is another example which uses MatTableDataSource

Upvotes: 2

Related Questions