feat(package): new - MatLinkPreviewComponent has optional linkPrevi…

…ew input
angular-material-extensions · Jul 31, 2018 · 3d808c6 · 3d808c6
1 parent cfd9c14
commit 3d808c6
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 36 deletions.
diff --git a/demo/src/app/home/home.component.html b/demo/src/app/home/home.component.html
@@ -1,37 +1,44 @@
 <div class="jumbotron jumbotron-fluid">
-	<div class="container">
-		<div class="row">
-			<div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
-				<img src="assets/logo.svg" alt="@angular-material-extensions/link-preview logo" class="logo">
-			</div>
-			<div class="col-sm-8 text-center text-md-left">
-				<h1>@angular-material-extensions/link-preview</h1>
-				<p>Angular open source UI library to preview web links</p>
-				<p>Scroll down to see it in action!</p>
-				<p class="buttons">
-					<a class="btn btn-outline-primary btn-lg" href="https://github.com/angular-material-extensions/link-preview" target="_blank"><i class="fa fa-github fa-lg"></i>  Code on Github</a>
-					<a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i class="fa fa-book fa-lg"></i>  Documentation</a>
-					<a class="btn btn-outline-primary btn-lg" href="#" (click)="editOnStackBlitz()"><i class="fa fa-bolt fa-lg"></i>  Edit on StackBlitz</a>
-        		</p>
-			</div>
-		</div>
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
+        <img src="assets/logo.svg" alt="@angular-material-extensions/link-preview logo" class="logo">
+      </div>
+      <div class="col-sm-8 text-center text-md-left">
+        <h1>@angular-material-extensions/link-preview</h1>
+        <p>Angular open source UI library to preview web links</p>
+        <p>Scroll down to see it in action!</p>
+        <p class="buttons">
+          <a class="btn btn-outline-primary btn-lg" href="https://github.com/angular-material-extensions/link-preview"
+             target="_blank"><i class="fa fa-github fa-lg"></i> Code on Github</a>
+          <a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i
+            class="fa fa-book fa-lg"></i> Documentation</a>
+          <a class="btn btn-outline-primary btn-lg" href="#" (click)="editOnStackBlitz()"><i
+            class="fa fa-bolt fa-lg"></i> Edit on StackBlitz</a>
+        </p>
+      </div>
+    </div>
 
-	</div>
+  </div>
 </div>
 
 <section class="home">
   <div class="container">
-		<!-- put your content here-->
-		<p>Put your content here. Typically, examples of your library in action (directives, components...)</p>
+    <!-- put your content here-->
+
+    <div class="mx-auto">
+      <mat-link-preview [linkPreview]="linkExample"></mat-link-preview>
+    </div>
+
     <mat-form-field class="demo-full-width">
       <mat-label>Address 2</mat-label>
       <textarea matInput matLinkPreview></textarea>
     </mat-form-field>
 
-    <div>
-      <mat-link-preview-container></mat-link-preview-container>
-    </div>
-		<!--<mat-component></mat-component>-->
-		<p>Happy ng-hacking!</p>
+    <!--<div>-->
+    <!--<mat-link-preview-container></mat-link-preview-container>-->
+    <!--</div>-->
+    <!--<mat-component></mat-component>-->
+    <p>Happy ng-hacking!</p>
   </div>
 </section>
diff --git a/demo/src/app/home/home.component.ts b/demo/src/app/home/home.component.ts
@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {LinkPreviewService} from '@angular-material-extensions/link-preview';
+import {LinkPreview, MatLinkPreviewService} from '@angular-material-extensions/link-preview';
 import sdk from '@stackblitz/sdk';
 
 @Component({
@@ -10,8 +10,15 @@ import sdk from '@stackblitz/sdk';
 })
 export class HomeComponent implements OnInit {
 
+  linkExample: LinkPreview = {
+    title: 'Google',
+    description: 'Search webpages, images, videos and more.',
+    image: 'https:\/\/www.google.com\/images\/logo.png',
+    url: 'https:\/\/www.google.com'
+  };
+
   constructor(private titleService: Title,
-              public linkPreviewService: LinkPreviewService) {
+              public linkPreviewService: MatLinkPreviewService) {
   }
 
   ngOnInit() {

diff --git a/src/module/components/mat-link-preview/mat-link-preview.component.html b/src/module/components/mat-link-preview/mat-link-preview.component.html
@@ -2,7 +2,7 @@
 
 <ng-template #render>
   <mat-card>
-    <img mat-card-image [src]="linkPreview.image">
+    <img mat-card-image-xs [src]="linkPreview.image">
     <mat-card-title>{{linkPreview.title}}</mat-card-title>
     <mat-card-subtitle>{{linkPreview.description}}</mat-card-subtitle>
   </mat-card>

diff --git a/src/module/components/mat-link-preview/mat-link-preview.component.scss b/src/module/components/mat-link-preview/mat-link-preview.component.scss
@@ -1,3 +1,3 @@
 :host {
-  display: block;
+  display: inline-block;
 }
diff --git a/src/module/components/mat-link-preview/mat-link-preview.component.ts b/src/module/components/mat-link-preview/mat-link-preview.component.ts
@@ -11,21 +11,23 @@ import {LinkPreview, MatLinkPreviewService} from '../../..';
 export class MatLinkPreviewComponent implements OnInit, OnDestroy {
 
   @Input() link: Link;
-  linkPreview: LinkPreview;
+  @Input() linkPreview: LinkPreview;
   loaded: boolean;
   private _subscription: Subscription;
 
   constructor(public linkPreviewService: MatLinkPreviewService) {
   }
 
   ngOnInit(): void {
-    this.loaded = false;
-    this._subscription = this.linkPreviewService
-      .fetchLink(this.link.href)
-      .subscribe(value => {
-        this.linkPreview = value;
-        this.loaded = true;
-      });
+    if (this.link && !this.linkPreview) {
+      this.loaded = false;
+      this._subscription = this.linkPreviewService
+        .fetchLink(this.link.href)
+        .subscribe(value => {
+          this.linkPreview = value;
+          this.loaded = true;
+        });
+    }
   }
 
   ngOnDestroy(): void {