LinkPreview

Link previewer reading the Open Graph tags

Demo

https://test-link-preview.herokuapp.com/

Installation

Install link-preview with npm

  npm i --save @arekjaar/link-preview

Screenshots

Features

• Configurable background color [background]

• Configurable font color [fontColor]

• Configurable preview size [size]

• Fixed url [fixUrl]

• Dynamic url [url]

• Theming: rectangle-image-left, rectangle-image-right, square-image-up, square-image-down, square-image-center

Usage/Examples

app.module.ts

import { LinkPreviewModule } from '@arekjaar/link-preview';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    LinkPreviewModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div [style.padding]='"10px"'>
<link-preview [url]='url1' [type]='"rectangle-image-right"' [fixUrl]='"https://freecons.herokuapp.com/"' [size]=400 [fontColor]='"white"' [background]='"black"'></link-preview>
<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Set url and click out</mat-label>
  <input matInput (change)='setUrl1($event)'>
</mat-form-field>
</div>

app.component.ts

public url1: Subject<string> = new Subject();

setUrl1(event: any){
      if (event.target.value !== '') {
      this.url1.next(event.target.value);
      }
    }

Hi, Do you want to collaborate by inviting me to a coffee? 👋