Link Preview

screenshot of Link Preview
angular
scss

Angular open source UI library to preview web links

Overview

If you're a developer looking for a robust solution to preview web links in your Angular applications, the @angular-material-extensions/link-preview library is an excellent choice. Built for and by developers, this Angular open source UI library seamlessly integrates material design with powerful functionalities powered by ngx-linkifyjs. It allows users to present previews of links with ease, making it a valuable tool for enhancing user experience in web applications.

This library is designed to work with Angular 2 or higher, and it has been tested up to Angular version 7. With its straightforward installation process and rich capabilities, @angular-material-extensions/link-preview empowers you to display web links effectively while maintaining a sleek, modern aesthetic that users expect from material design.

Features

  • Multiple Link Preview: This library supports the preview of multiple links simultaneously, enabling users to view all links within a text input easily.
  • Seamless Integration: Designed to work smoothly with Angular Material, it blends well with the existing components and themes of your Angular application.
  • Dynamic Link Parsing: The matLinkPreview directive efficiently identifies and parses links from any text input, making the integration simple and hassle-free.
  • Loading Indicator: The option to show a loading spinner while fetching link previews enhances user experience by providing feedback during the loading process.
  • Customizable Button Colors: Developers can customize the color of the URL buttons, choosing from options like primary, accent, or warn to align with their design preferences.
  • Simple Installation: Easily installable via npm, with clear documentation to guide you through the setup process.
  • Robust Documentation: Comprehensive documentation is available to help you implement and utilize all features effectively, allowing for quick onboarding.
angular
Angular

Angular is a TypeScript-based open-source framework by Google for building dynamic single-page applications and cross-platform mobile apps with MVC architecture and a rich set of features.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

material-design
Material Design

Material Design is a design system developed by Google that provides a set of guidelines, components, and tools for creating visually appealing and functional user interfaces. Material Design is designed to be flexible and customizable, making it a great choice for a wide range of applications and use cases.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.

rollup
Rollup

RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.