ng add @angular/material

import { MatTableModule } from '@angular/material/table';

import { MatSortModule } from '@angular/material/sort';

import { MatCardModule } from '@angular/material/card'; 

@NgModule ({  

imports: [    MatTableModule,    MatSortModule,    MatCardModule,    // other modules here  

]})

class AppModule {}

import { Injectable } from "@angular/core";import { HttpClient } from '@angular/common/http';import { Observable } from "rxjs";import { GithubApi } from "./table/table.component";import { SortDirection } from "@angular/material/sort"; @Injectable()export class AppService {    constructor(private httpClient: HttpClient) {    }     getSampleData(sort: string, order: SortDirection, page: number): Observable<GithubApi> {        return this.httpClient.get<GithubApi>(`https://api.github.com/search/issues?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`);    }}

import { AfterViewInit, Component, ViewChild } from '@angular/core';import { MatSort } from '@angular/material/sort';import { of } from 'rxjs';import { startWith, switchMap, catchError, map } from 'rxjs/operators';import { AppService } from '../app.service'; export interface GithubApi {  items: GithubIssue[];  total_count: number;} export interface GithubIssue {  created_at: string;  number: string;  state: string;  title: string;} @Component({  selector: 'app-table',  templateUrl: './table.component.html',  styleUrls: ['./table.component.scss']})export class TableComponent implements AfterViewInit {  displayedColumns: string[] = ['created', 'state', 'number', 'title'];  data: GithubIssue[] = [];  @ViewChild(MatSort) sort!: MatSort;   constructor(private appService: AppService) { }   ngAfterViewInit() {    // If the user changes the sort order, reset back to the first page.    this.sort.sortChange.subscribe(() => 0);     this.sort.sortChange      .pipe(        startWith({}),        switchMap(() => {          return this.appService!.getSampleData(this.sort.active, this.sort.direction, 0)            .pipe(catchError(() => of(null)));        }),        map(data => {          if (data === null) {            return [];          }           return data.items;        })      ).subscribe(data => this.data = data);  }}