# ngx-link-preview
[](https://www.npmjs.com/package/ngx-link-preview)
[](https://www.npmjs.com/package/ngx-link-preview)
[](https://www.npmjs.com/package/ngx-link-preview)
### The Open Graph link preview component for Angular 6+
### ⇨ DEMO
### Installation
```sh
npm install --save ngx-link-preview
```
```sh
yarn add ngx-link-preview
```
### Features
- Configurable preview
- Render array of links
- Parse links in string
- Loading indicator
- Theming: `default` and `modern` theme included
### Requirements
- Angular 6+
- You will need to create an endpoint at your backend to parse an url for meta tags.
[See info below](#endpoint)
### Component configuration
#### 1. Import to your module
```ts
@NgModule({
imports: [
NgxLinkPreviewModule,
...
]
})
export class AppModule { }
```
#### 2. Use as regular component
```html
```
#### 3. Parameters: Configure the preview
#### • Two **required** parameters:
##### 1. `[apiRoute]="myApiRoute"`
_apiRoute_ accepts any url, where you want to retrieve the metadata from. The
target url will be attached by the component as base64 urlencoded query parameter.
```ts
/** API route where to get the meta data from, component will build the full request url
* Schema: api.example.com/api/get-meta-data?url=d3d3LmV4YW1wbGUuY29t
*/
@Input()
public apiRoute: string;
```
##### 2. `[getApiEndpoint$]="apiCallbackFn"`
A generic callback function that returns an observable, that runs the api request on subscription.
You can use the default Angular HttpClient method, or your configured backend wrapper observable.
```ts
/** Method that does the API request, provide as class member arrow function from parent */
@Input()
public getApiEndpoint$: (requestUrl: string) => Observable;
```
For example:
```ts
public apiCallbackFn = (route: string) => {
return this.http.get(route);
};
```
#### • **Optional** parameters
##### • Links that should be rendered, default: `[]`
```ts
/** Plain links string array */
@Input()
public links: string[] = [];
````
##### • Input string that should be parsed for links, can be combined with `links[]`
```ts
/** Input string to parse for links */
@Input()
public parseForLinksStr: string;
```
##### • Query parameter name, default: `'url'`
```ts
/** Target url will be attached as encodeURI(btoa(url)), so it must be decoded on the server */
@Input()
public queryParamName = 'url';
```
##### • Show image in preview, default: `true`
```ts
/** boolean: show image in preview */
@Input()
public showImage = true;
```
##### • Show site name in preview, default: `true`
```ts
/** boolean: show site name in preview */
@Input()
public showSiteName = true;
```
##### • Show title in preview, default: `true`
```ts
/** boolean: show title in preview */
@Input()
public showTitle = true;
```
##### • Show description in preview, default: `true`
```ts
/** boolean: show description in preview */
@Input()
public showDescription = true;
```
##### • Show url in preview, default: `false`
```ts
/** boolean: show link url in preview */
@Input()
public showLinkUrl = false;
```
##### • Use cache, default: `true`
```ts
/** boolean: use cache to display previews faster on next rendering */
@Input()
public useCache = true;
```
##### • Max cache age in milliseconds, default: `7 days`
```ts
/** number: max age the data cache of a link preview should be used */
@Input()
public maxCacheAgeMs = 1000 * 60 * 60 * 24 * 7; // 7 days
```
##### • Show loading indicator, default: `true`
```ts
/** boolean: show loading indicator */
@Input()
public showLoadingIndicator = true;
```
##### • HTML link `` should be clickable, default: `false`
```ts
/**
* boolean: whether the link should be clickable.
* This is a question of context security. Otherwise use (previewClick) event.
*/
@Input()
public useHtmlLinkDefaultClickEvent = false;
```
##### • HTML link target, default: `'_blank'` (new tab)
```ts
/**
* HtmlLinkTarget: where the HTML link should be opened on click.
* Only has an effect if [useHtmlLinkDefaultClickEvent]="true"
*/
@Input()
public htmlLinkTarget: HtmlLinkTarget = '_blank';
```
##### • Event emits the URL on click
```ts
/** Event emitter: on click to handle the click event, emits the clicked URL */
@Output()
public previewClicked = new EventEmitter();
```
```html
(previewClick)="previewClicked($event)"
```
### Theming
The package ships a default and a modern theme. The modern theme crops the preview image, what
might conclude in unintended results. To use the modern theme, just pass the css class:
```html
```
**Feel free to create more themes and submit a pull request or open an issue!**
You can use this skeleton: (click to show)