Services

src/app/pages/services/services.component.html

@@ -0,0 +1,17 @@
+<h3>{{'services' | i18n}}</h3>
+
+<mat-card *ngFor="let service of services">
+    <mat-card-header>
+        <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
+        <mat-card-title>{{'services.' + service.name + '.title'  | i18n}}</mat-card-title>
+        <mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
+    </mat-card-header>
+    <mat-card-content>
+        <p>
+            {{ 'services.' + service.name + '.text'  | i18n}}
+        </p>
+    </mat-card-content>
+    <mat-card-actions>
+        <a href="{{service.url}}" target="_blank" mat-raised-button color="primary">{{'services.goto'  | i18n}}</a>
+    </mat-card-actions>
+</mat-card>

src/app/pages/services/services.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ServicesComponent } from './services.component';
+
+describe('ServicesComponent', () => {
+  let component: ServicesComponent;
+  let fixture: ComponentFixture<ServicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ServicesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/services/services.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { ServiceService } from '../../services/service.service';
+
+@Component({
+  selector: 'app-services',
+  templateUrl: './services.component.html',
+  styleUrls: ['./services.component.scss']
+})
+export class ServicesComponent implements OnInit {
+
+  services = [];
+
+  constructor(private serviceService: ServiceService) { }
+
+  ngOnInit(): void {
+    this.serviceService.services().subscribe((data: any) => {
+      this.services = data;
+    })
+  }
+
+}