@angular-material-extensions/link-preview - Angular open source UI library to preview web links powered by ngx-linkifyjs and material design
multiple link preview
Built by and for developers
Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here
If did you like this project, support angular-material-extensions by starring and sharing it
Table of Contents
- Demo
- Dependencies
- Peer Dependencies
- Additional Requirements - material (Include a theme)
- Installation
- Usage
- Documentation
- Run Demo App Locally
- Development
- Other Angular Libraries
- Support
- License
View all the directives and components in action at https://angular-material-extensions.github.io/link-preview
- Angular (requires Angular 2 or higher, tested with V7)
or use angular schematics like e.g:
Installation
Install above dependencies via npm.
Now install @angular-material-extensions/link-preview via:
SystemJS
Note:If you are using
SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,mapneeds to tell the System loader where to look for@angular-material-extensions/link-preview:
'@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:
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 MatLinkPreviewModule .forRoot()):
@NgModule({
declarations: [AppComponent, ...],
imports: [MatLinkPreviewModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
Other modules in your application can simply import MatLinkPreviewModule:
@NgModule({
declarations: [OtherComponent, ...],
imports: [MatLinkPreviewModule, ...],
})
export class OtherModule {
}
Usage
Directives
matLinkPreview used to find and parse links from any text input - should be used in combination with
e.g:
<mat-label>Enter here your text here with few links to preview ;)mat-label>
<textarea matInput matTextareaAutosize matLinkPreview minRows="6">textarea>
mat-form-field>
Components
| option | bind | type | default | description |
|---|---|---|---|---|
| color | Input() |
string |
primary |
the color to use for the button of the url - options --> `primary |
| multiple | Input() |
boolean |
false |
whether to find, parse and render one single or multiple links |
| showLoadingsProgress | Input() |
boolean |
true |
whether to show and render a loading spinner while fetching the link to preview |
e.g:
Full example code
<div fxLayout="column" fxLayoutAlign="center">
<mat-form-field class="demo-full-width" appearance="outline">
<mat-label>Enter here your text here with few links to preview ;)mat-label>
<textarea matInput matTextareaAutosize matLinkPreview minRows="6">textarea>
<mat-link-preview-container [multiple]="true">mat-link-preview-container>
mat-form-field>
div>
div>
Please checkout the full documentation here
- clone this repo by running
- setup the @angular-material-extensions/link-preview package
- navigate to the demo app directory
- install the dependencies and run the app
- the app is now hosted by
http://localhost:4200/
- clone this repo
- Install the dependencies by running
npm i - setup the library
gulp setup - Navigate to the demo app's directory
cd demo_npm i && npm start
- ngx-auth-firebaseui
- @firebaseui/ng-bootstrap
- ngx-linkifyjs
- @angular-material-extensions/password-strength
- @angular-material-extensions/google-maps-autocomplete
- @angular-material-extensions/pages
- @angular-material-extensions/contacts
- @angular-material-extensions/faq
- @angular-material-extensions/combination-generator
- Drop an email to: Anthony Nahas
- or open an appropriate issue
- let us chat on Gitter
Built by and for developers we will help you
Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)