Skip to content

Commit 3d808c6

Browse files
AnthonyNahasAnthonyNahas
committed
feat(package): new - MatLinkPreviewComponent has optional linkPreview input
1 parent cfd9c14 commit 3d808c6

File tree

5 files changed

+52
-36
lines changed

5 files changed

+52
-36
lines changed

‎demo/src/app/home/home.component.html‎

Lines changed: 31 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
11
<div class="jumbotron jumbotron-fluid">
2-
<div class="container">
3-
<div class="row">
4-
<div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
5-
<img src="assets/logo.svg" alt="@angular-material-extensions/link-preview logo" class="logo">
6-
</div>
7-
<div class="col-sm-8 text-center text-md-left">
8-
<h1>@angular-material-extensions/link-preview</h1>
9-
<p>Angular open source UI library to preview web links</p>
10-
<p>Scroll down to see it in action!</p>
11-
<p class="buttons">
12-
<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>
13-
<a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i class="fa fa-book fa-lg"></i> Documentation</a>
14-
<a class="btn btn-outline-primary btn-lg" href="#" (click)="editOnStackBlitz()"><i class="fa fa-bolt fa-lg"></i> Edit on StackBlitz</a>
15-
</p>
16-
</div>
17-
</div>
2+
<div class="container">
3+
<div class="row">
4+
<div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
5+
<img src="assets/logo.svg" alt="@angular-material-extensions/link-preview logo" class="logo">
6+
</div>
7+
<div class="col-sm-8 text-center text-md-left">
8+
<h1>@angular-material-extensions/link-preview</h1>
9+
<p>Angular open source UI library to preview web links</p>
10+
<p>Scroll down to see it in action!</p>
11+
<p class="buttons">
12+
<a class="btn btn-outline-primary btn-lg" href="https://github.com/angular-material-extensions/link-preview"
13+
target="_blank"><i class="fa fa-github fa-lg"></i> Code on Github</a>
14+
<a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i
15+
class="fa fa-book fa-lg"></i> Documentation</a>
16+
<a class="btn btn-outline-primary btn-lg" href="#" (click)="editOnStackBlitz()"><i
17+
class="fa fa-bolt fa-lg"></i> Edit on StackBlitz</a>
18+
</p>
19+
</div>
20+
</div>
1821

19-
</div>
22+
</div>
2023
</div>
2124

2225
<section class="home">
2326
<div class="container">
24-
<!-- put your content here-->
25-
<p>Put your content here. Typically, examples of your library in action (directives, components...)</p>
27+
<!-- put your content here-->
28+
29+
<div class="mx-auto">
30+
<mat-link-preview [linkPreview]="linkExample"></mat-link-preview>
31+
</div>
32+
2633
<mat-form-field class="demo-full-width">
2734
<mat-label>Address 2</mat-label>
2835
<textarea matInput matLinkPreview></textarea>
2936
</mat-form-field>
3037

31-
<div>
32-
<mat-link-preview-container></mat-link-preview-container>
33-
</div>
34-
<!--<mat-component></mat-component>-->
35-
<p>Happy ng-hacking!</p>
38+
<!--<div>-->
39+
<!--<mat-link-preview-container></mat-link-preview-container>-->
40+
<!--</div>-->
41+
<!--<mat-component></mat-component>-->
42+
<p>Happy ng-hacking!</p>
3643
</div>
3744
</section>

‎demo/src/app/home/home.component.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component, OnInit} from '@angular/core';
22
import {Title} from '@angular/platform-browser';
3-
import {LinkPreviewService} from '@angular-material-extensions/link-preview';
3+
import {LinkPreview, MatLinkPreviewService} from '@angular-material-extensions/link-preview';
44
import sdk from '@stackblitz/sdk';
55

66
@Component({
@@ -10,8 +10,15 @@ import sdk from '@stackblitz/sdk';
1010
})
1111
export class HomeComponent implements OnInit {
1212

13+
linkExample: LinkPreview = {
14+
title: 'Google',
15+
description: 'Search webpages, images, videos and more.',
16+
image: 'https:\/\/www.google.com\/images\/logo.png',
17+
url: 'https:\/\/www.google.com'
18+
};
19+
1320
constructor(private titleService: Title,
14-
public linkPreviewService: LinkPreviewService) {
21+
public linkPreviewService: MatLinkPreviewService) {
1522
}
1623

1724
ngOnInit() {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
<ng-template #render>
44
<mat-card>
5-
<img mat-card-image [src]="linkPreview.image">
5+
<img mat-card-image-xs [src]="linkPreview.image">
66
<mat-card-title>{{linkPreview.title}}</mat-card-title>
77
<mat-card-subtitle>{{linkPreview.description}}</mat-card-subtitle>
88
</mat-card>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
:host {
2-
display: block;
2+
display: inline-block;
33
}

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,23 @@ import {LinkPreview, MatLinkPreviewService} from '../../..';
1111
export class MatLinkPreviewComponent implements OnInit, OnDestroy {
1212

1313
@Input() link: Link;
14-
linkPreview: LinkPreview;
14+
@Input() linkPreview: LinkPreview;
1515
loaded: boolean;
1616
private _subscription: Subscription;
1717

1818
constructor(public linkPreviewService: MatLinkPreviewService) {
1919
}
2020

2121
ngOnInit(): void {
22-
this.loaded = false;
23-
this._subscription = this.linkPreviewService
24-
.fetchLink(this.link.href)
25-
.subscribe(value => {
26-
this.linkPreview = value;
27-
this.loaded = true;
28-
});
22+
if (this.link && !this.linkPreview) {
23+
this.loaded = false;
24+
this._subscription = this.linkPreviewService
25+
.fetchLink(this.link.href)
26+
.subscribe(value => {
27+
this.linkPreview = value;
28+
this.loaded = true;
29+
});
30+
}
2931
}
3032

3133
ngOnDestroy(): void {

0 commit comments

Comments
 (0)