Angular open source UI library to preview web links
npm install @angular-material-extensions/link-preview
height="256px" width="256px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/link-preview/assets/angular-material-extensions-logo.png">











src="https://cdn.jsdelivr.net/gh/angular-material-extensions/link-preview/assets/demo1.gif">
multiple link preview
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/link-preview/assets/demo.png">
If did you like this project, support angular-material-extensions
by starring :star: and sharing it :loudspeaker:
View all the directives and components in action at https://angular-material-extensions.github.io/link-preview
``bash`
npm i @angular/cdk @angular/material @angular/animations @angular/http
or use angular schematics like e.g:
`bash`
ng add @angular/material
---
Now install @angular-material-extensions/link-preview via:`shell`
npm install --save @angular-material-extensions/link-preview
---
##### SystemJS
>Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle.map
In your systemjs config file, needs to tell the System loader where to look for @angular-material-extensions/link-preview:`js`
map: {
'@angular-material-extensions/link-preview': 'node_modules/@angular-material-extensions/link-preview/bundles/link-preview.umd.js',
}
---
Once installed you need to import the main module:
`js`
import { MatLinkPreviewModule } from '@angular-material-extensions/link-preview'; MatLinkPreviewModule .forRoot()
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice ):`js
import { MatLinkPreviewModule } from '@angular-material-extensions/link-preview';
@NgModule({
declarations: [AppComponent, ...],
imports: [MatLinkPreviewModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`
Other modules in your application can simply import MatLinkPreviewModule :
`js
import { MatLinkPreviewModule } from '@angular-material-extensions/link-preview';
@NgModule({
declarations: [OtherComponent, ...],
imports: [MatLinkPreviewModule, ...],
})
export class OtherModule {
}
`
#### matLinkPreview used to find and parse links from any text input - should be used in combination with to render and preview the found links
e.g:
`html`
#### the container that hold the links to preview
| option | bind | type | default | description |
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| color | Input() | string | primary | the color to use for the button of the url - options --> primary | accent | warnInput()
| multiple | | boolean | false | whether to find, parse and render one single or multiple linksInput()
| showLoadingsProgress| | boolean | true | whether to show and render a loading spinner while fetching the link to preview
e.g:
`html`
#### Full example code
` html`
---
Please checkout the full documentation here
- clone this repo by running
`bash`
$ git clone https://github.com/angular-material-extensions/link-preview.git
- setup the @angular-material-extensions/link-preview package
`bash`
$ gulp setup
- navigate to the demo app directory
`bash`
$ cd demo
- install the dependencies and run the app
`bash`
$ npm i && npm start
- the app is now hosted by http://localhost:4200/
1. clone this repo
2. Install the dependencies by running npm igulp setup
3. setup the library cd demo
4. Navigate to the demo app's directory
- npm i && npm start`
_
---
---
---
Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)