article page working

src/app/article.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ArticleService } from './article.service';
+
+describe('ArticleService', () => {
+  let service: ArticleService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ArticleService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/article.service.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ArticleService {
+  private articleUrl = 'http://midaiganes.irw.ee/api/list/dad2ec5d';
+
+  constructor(private http: HttpClient) { }
+
+  public getArticle(): Observable<any> {
+    return this.http.get<any>(this.articleUrl);
+  }
+
+}

src/app/article.ts

@@ -1,4 +1,8 @@
 
 export interface IArticle {
-
-};
+  title: string;
+  intro: string;
+  body: string;
+  images: any;
+  tags: string[];
+}

src/app/article/article.component.html

@@ -1 +1,10 @@
-<p>article works!</p>
+<h1>{{ article.title }}</h1>
+<div class="intro" [innerHTML]="article.intro"></div>
+<ng-container *ngIf="article.images.length">
+  <ng-container *ngFor="let image of article.images">
+    <div class="image-wrapper">
+      <img src="{{ image.medium }}" alt="{{ image.alt }}" title="{{ image.title }}">
+    </div>
+  </ng-container>
+</ng-container>
+<div class="content-wrapper" [innerHTML]="article.body"></div>

src/app/article/article.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
 
+import { ArticleService } from '../article.service';
+
+import { IArticle } from '../article';
+
 @Component({
   selector: 'app-article',
   templateUrl: './article.component.html',
   styleUrls: ['./article.component.styl']
 })
 export class ArticleComponent implements OnInit {
+  public article: IArticle;
 
-  constructor() { }
+  constructor(private articleService: ArticleService) { }
 
   ngOnInit(): void {
+    this.articleService.getArticle().subscribe((data) => this.article = data);
   }
 
 }

src/app/list/list.component.html

@@ -1,3 +1,4 @@
+<h1>Nimekiri</h1>
 <table>
   <thead>
     <th (click)="setSort('firstname')" class="clickable">Eesnimi