Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
115 lines (86 sloc) 2.87 KB
title lastmod publishdate author draft description type tags vimeo github
Link Preview Angular
2019-07-23 10:43:06 -0700
2019-07-23 10:43:06 -0700
Jeff Delaney
false
Build a Link Preview Component with Ionic Angular
lessons
angular
ionic
cloud-functions

{{% box emoji="👀" %}} This tutorial is an extension of the Web Scraping Guide. You must have the HTTP Cloud Function running locally or deployed to production to fetch link data from third-party websites.
{{% /box %}}

Link Preview Component

The component below demonstrates a basic link preview implementation in Angular (Ionic 4). Submitting the form with URLs included in the text will be rendered in page with a title, image, and description based on the site's metatags.

{{< figure src="/img/snippets/ionic-link-preview.png" alt="Link preview result in Ionic Angular" >}}

The component TypeScript uses Angular's HTTP Client to subscribe to the function endpoint, passing it the text from the form.

{{< file "ngts" "home.component.ts" >}} {{< highlight typescript >}} import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http';

@Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage {

links; loading = false; text = '';

constructor(private http: HttpClient) {}

handleSubmit(evt) { evt.preventDefault();

this.loading = true;

this.http.post(
  'http://localhost:5000/fireship-lessons/us-central1/scraper',
  JSON.stringify({ text: this.text })
)
.subscribe(res => {
  this.links = res;
  this.loading = false;
});

}

handleChange(evt) { this.text = evt.target.value; }

}

{{< /highlight >}}

The template loops have the links after they are returned from the HTTP function. We use Ionic components to provide a nice UI out of the box.

{{< file "html" "home.component.html" >}} {{< highlight html >}}

Form

Text
<ion-button type="submit">Submit</ion-button>

{{ text }}


{{ loading ? 'Loading... 🤔🤔🤔' : '' }}

<a class="preview" *ngFor="let linkData of links" [href]="linkData.url"> <img [src]="linkData.image" />

{{linkData.title}}

{{linkData.description}}

{{< /highlight >}}

You can’t perform that action at this time.