Table with static data
ADD
src/app/api-list/api-list.component.html
+<table mat-table [dataSource]="apiData">
+ <ng-container matColumnDef="name">
+ <th mat-header-cell *matHeaderCellDef>API Name</th>
+ <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+ </ng-container>
+ <ng-container matColumnDef="public">
+ <th mat-header-cell *matHeaderCellDef>is public</th>
+ <td mat-cell *matCellDef="let element"> {{element.public}} </td>
+ </ng-container>
+ <ng-container matColumnDef="endpoint">
+ <th mat-header-cell *matHeaderCellDef>Endpoint</th>
+ <td mat-cell *matCellDef="let element"> {{element.endpoint}} </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

ADD
src/app/api-list/api-list.component.scss
+table {
+ width: 100%;
+}

ADD
src/app/api-list/api-list.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApiListComponent } from './api-list.component';
+
+describe('ApiListComponent', () => {
+ let component: ApiListComponent;
+ let fixture: ComponentFixture<ApiListComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ApiListComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ApiListComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});

ADD
src/app/api-list/api-list.component.ts
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-api-list',
+ templateUrl: './api-list.component.html',
+ styleUrls: ['./api-list.component.scss']
+})
+export class ApiListComponent implements OnInit {
+
+ apiData: Array<object> = [{
+ name: 'Petstore',
+ endpoint: 'https://petstore.swagger.io/v2/',
+ public: true
+ },
+ {
+ name: 'Analytic API',
+ endpoint: 'http://pc0854.scheer.systems:3040/analytics/',
+ public: false
+ }];
+
+ displayedColumns: string[] = ['public', 'name', 'endpoint'];
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}

MODIFY
src/app/app.component.html
src/app/app.component.html
<app-pas-header></app-pas-header>
-<div style="text-align:center">
- <h1>
- Welcome to {{ title }}!
- </h1>
-</div>
+<app-api-list></app-api-list>
<router-outlet></router-outlet>

MODIFY
src/app/app.module.ts
src/app/app.module.ts
@@ -8,18 +8,23 @@ import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
+import { ApiListComponent } from './api-list/api-list.component';
+
+import { MatTableModule } from '@angular/material/table';
@NgModule({
declarations: [
AppComponent,
- PasHeaderComponent
+ PasHeaderComponent,
+ ApiListComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
- MatIconModule
+ MatIconModule,
+ MatTableModule
],
providers: [],
bootstrap: [AppComponent]

Table with static data