feat(package): added mat-link-preview component

Author: AnthonyNahas

src/module/components/link-preview.component.html

@@ -0,0 +1,12 @@
+<div *ngIf="this.linkPreview; then render else loading"></div>
+
+<ng-template #render>
+  <mat-card>
+    <img mat-card-image [src]="linkPreview.image">
+    <mat-card-title>{{linkPreview.title}}</mat-card-title>
+    <mat-card-subtitle>{{linkPreview.description}}</mat-card-subtitle>
+  </mat-card>
+</ng-template>
+<ng-template #loading>
+  <mat-progress-bar *ngIf="false" mode="indeterminate"></mat-progress-bar>
+</ng-template>

src/module/components/link-preview.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

src/module/components/link-preview.component.ts

@@ -22,7 +22,7 @@ describe('LinkPreviewComponent', function () {
   beforeEach(() => {
     fixture = TestBed.createComponent(LinkPreviewComponent);
     comp = fixture.componentInstance;
-    de = fixture.debugElement.query(By.css('p.description'));
+    // de = fixture.debugElement.query(By.css('p.description'));
   });
 
   it('should create components', () => expect(comp).toBeDefined());

src/module/components/mat-link-preview/link-preview.component.html

@@ -0,0 +1,38 @@
+import {Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {Subscription} from 'rxjs/internal/Subscription';
+import {Link} from 'ngx-linkifyjs';
+import {LinkPreview} from '../../..';
+import {LinkPreviewService} from '../../..';
+
+@Component({
+  selector: 'mat-link-preview',
+  templateUrl: './link-preview.component.html',
+  styleUrls: ['./link-preview.component.scss']
+})
+export class LinkPreviewComponent implements OnInit, OnDestroy {
+
+  @Input() link: Link;
+  linkPreview: LinkPreview;
+  loaded: boolean;
+  private _subscription: Subscription;
+
+  constructor(public linkPreviewService: LinkPreviewService) {
+  }
+
+  ngOnInit(): void {
+    this.loaded = false;
+    this._subscription = this.linkPreviewService
+      .fetchLink(this.link.href)
+      .subscribe(value => {
+        this.linkPreview = value;
+        this.loaded = true;
+      });
+  }
+
+  ngOnDestroy(): void {
+    if (this._subscription) {
+      this._subscription.unsubscribe();
+    }
+  }
+
+}