Step 5<\/strong><\/p>\nOpen the rest-api.services.ts file in the app folder of your application\u00a0 and replace the code with the following:<\/p>\n
import { Injectable } from '@angular\/core';\r\n\r\nimport { Observable } from 'rxjs';\r\n\r\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\nexport interface User {\r\n\r\n\u00a0\u00a0id: string;\r\n\r\n\u00a0\u00a0name: string;\r\n\r\n\u00a0\u00a0email: string;\r\n\r\n\u00a0\u00a0website: string;\r\n\r\n}\r\n\r\n@Injectable({\r\n\r\n\u00a0\u00a0providedIn: 'root'\r\n\r\n})\r\n\r\nexport class RestApiService {\r\n\r\n\u00a0\u00a0api: string = \"https:\/\/jsonplaceholder.typicode.com\/users\";\r\n\r\n\u00a0\u00a0constructor(private http: HttpClient) { }\r\n\r\n\u00a0\u00a0getUsers(): Observable<User[]> {\r\n\r\n\u00a0\u00a0\u00a0\u00a0return this.http.get<User[]>(this.api)\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n\r\n<\/pre>\nStep 6<\/b><\/p>\n
Now add the following code in the app.component file in the src\/app\/ folder of your Angular app.<\/p>\n
import { Component, ViewChild } from '@angular\/core';\r\n\r\nimport { RestApiService } from '.\/rest-api.service';\r\n\r\nimport { MatPaginator } from '@angular\/material\/paginator';\r\n\r\nimport { MatTableDataSource } from '@angular\/material\/table';\r\n\r\nexport interface TableElement {\r\n\r\n\u00a0\u00a0id: string;\r\n\r\n\u00a0\u00a0name: string;\r\n\r\n\u00a0\u00a0email: string;\r\n\r\n\u00a0\u00a0website: string;\r\n\r\n}\r\n\r\n@Component({\r\n\r\n\u00a0\u00a0selector: 'app-root',\r\n\r\n\u00a0\u00a0templateUrl: '.\/app.component.html',\r\n\r\n\u00a0\u00a0styleUrls: ['.\/app.component.scss'],\r\n\r\n})\r\n\r\nexport class AppComponent {\r\n\r\n\u00a0\u00a0Data!: TableElement[];\r\n\r\n\u00a0\u00a0col: string[] = ['id', 'name', 'email', 'website'];\r\n\r\n\u00a0\u00a0dataSource = new MatTableDataSource<TableElement>(this.Data);\r\n\r\n\u00a0\u00a0@ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;\r\n\r\n\u00a0\u00a0constructor(private restApiService: RestApiService) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0this.restApiService.getUsers().subscribe((res) => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.dataSource = new MatTableDataSource<TableElement>(res);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setTimeout(() => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.dataSource.paginator = this.paginator;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, 0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0}\r\n\r\n}\r\n\r\n\r\n<\/pre>\nStep 7<\/strong><\/p>\nIt\u2019s time to add the layout to the html file of Angular app. Add the following code to the app.component.html file.<\/p>\n
<mat-toolbar colour=\"accent\" class=\"header\">\r\n\r\n\u00a0\u00a0<span>Angular PWA Example<\/span>\r\n\r\n<\/mat-toolbar>\r\n\r\n<table mat-table [dataSource]=\"dataSource\" matSort>\r\n\r\n\u00a0\u00a0<ng-container matColumnDef=\"id\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0<th mat-header-cell *matHeaderCellDef mat-sort-header> ID. <\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<td mat-cell *matCellDef=\"let element\"> {{element.id}} <\/td>\r\n\r\n\u00a0\u00a0<\/ng-container>\r\n\r\n\u00a0\u00a0<ng-container matColumnDef=\"name\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0<th mat-header-cell *matHeaderCellDef mat-sort-header> Name <\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<td mat-cell *matCellDef=\"let element\"> {{element.name}} <\/td>\r\n\r\n\u00a0\u00a0<\/ng-container>\r\n\r\n\u00a0\u00a0<ng-container matColumnDef=\"email\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0<th mat-header-cell *matHeaderCellDef mat-sort-header> Email <\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<td mat-cell *matCellDef=\"let element\"> {{element.email}} <\/td>\r\n\r\n\u00a0\u00a0<\/ng-container>\r\n\r\n\u00a0\u00a0<ng-container matColumnDef=\"website\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0<th mat-header-cell *matHeaderCellDef mat-sort-header> Website <\/th>\r\n\r\n\u00a0\u00a0\u00a0\u00a0<td mat-cell *matCellDef=\"let element\"> {{element.website}} <\/td>\r\n\r\n\u00a0\u00a0<\/ng-container>\r\n\r\n\u00a0\u00a0<tr mat-header-row *matHeaderRowDef=\"col\"><\/tr>\r\n\r\n\u00a0\u00a0<tr mat-row *matRowDef=\"let row; columns: col;\"><\/tr>\r\n\r\n<\/table>\r\n\r\n<mat-paginator [pageSizeOptions]=\"[7, 14, 28]\" showFirstLastButtons><\/mat-paginator>\r\n\r\n\r\n<\/pre>\nStep 8\u00a0<\/b><\/p>\n
Now that we have created our angular app, it is time to convert the app to progressive web app (PWA). Use the command, ng add angular pwa. Also use the below commands:<\/p>\n
\n- npm i @angular\/service-worker –force<\/strong> to add angular service-worker module<\/li>\n
- npm install -g http-server<\/strong> to configure production build with http server<\/li>\n
- ng build –prod<\/strong> to build app for production<\/li>\n
- http-server -o<\/strong> to start the build<\/li>\n<\/ul>\n
Step 9<\/strong><\/p>\nHere is our app.<\/p>\n
![\"Step](\"https:\/\/ripenapps.com\/blog\/wp-content\/uploads\/2023\/04\/Group-73.jpg\")
<\/p>\n