{"id":21340363,"url":"https://github.com/twicpics/components-demo-angular","last_synced_at":"2026-01-03T12:02:40.116Z","repository":{"id":96064718,"uuid":"580875614","full_name":"TwicPics/components-demo-angular","owner":"TwicPics","description":"Demonstration of TwicPics components in a Angular project.","archived":false,"fork":false,"pushed_at":"2025-02-11T11:23:35.000Z","size":676,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-11T12:30:11.268Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TwicPics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-21T17:13:11.000Z","updated_at":"2025-02-11T11:23:39.000Z","dependencies_parsed_at":"2023-03-29T18:18:40.412Z","dependency_job_id":"fc11fc96-95b8-4152-a0ae-fbf5e262c575","html_url":"https://github.com/TwicPics/components-demo-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Fcomponents-demo-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Fcomponents-demo-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Fcomponents-demo-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TwicPics%2Fcomponents-demo-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TwicPics","download_url":"https://codeload.github.com/TwicPics/components-demo-angular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243817501,"owners_count":20352564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T00:50:16.628Z","updated_at":"2026-01-03T12:02:40.057Z","avatar_url":"https://github.com/TwicPics.png","language":"HTML","readme":"# TwicPics Components + Angular\n\nThis project is a demonstration project of [TwicPics Components](https://www.twicpics.com/docs/components/angular?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components) using [Angular](https://angular.io/) and [standalone components](https://angular.io/guide/standalone-components).\n\n## How to build\n\n### Using npm\n\n```bash\n# install dependencies\n$ npm install\n\n# serve with hot reload at localhost:3000\n$ npm run serve\n\n# build for production\n$ npm run build\n```\n\n### Using yarn\n\n```bash\n# install dependencies\n$ yarn install\n\n# serve with hot reload at localhost:3000\n$ yarn serve\n\n# build for production\n$ yarn build\n```\n\n## Overview\n\n\u003cdiv id='what-is-twicpics'/\u003e\n\n### What is [TwicPics](https://www.twicpics.com/?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components)?\n\n[TwicPics](https://www.twicpics.com/?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components) is a **Responsive Image Service Solution** (SaaS) that enables **on-demand responsive image generation**.\n\nWith [TwicPics](https://www.twicpics.com/?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components), developers only deal with high-resolution versions of their media while end-users receive **optimized, perfectly sized, device-adapted** versions **delivered from a server close to them**.\n\n[TwicPics](https://www.twicpics.com/?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components) acts as an **image proxy**. It requests your master image, be it on your own web server, cloud storage or DAM, then generates a **device-adapted** version with **best-in-class compression**, delivered directly to the end-user from the **closest delivery point** available.\n\n\u003cdiv id='what-is-twicpics-components'/\u003e\n\n### What is TwicPics Components?\n\nTwicPics Components is a **collection of web components** that make it dead easy to unleash the power of [TwicPics](https://www.twicpics.com/?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components) in your own projects.\n\nBasically, TwicPics components replace `img` and `video` tags. They greatly and transparently optimize your CLS by providing LQIP (Low-Quality Image Placeholders) and Lazy Loading out of the box.\n\nSimply replace this:\n\n```html\n\u003cimg src=\"https://assets.twicpics.com/examples/football.jpg\" /\u003e\n```\n\nWith this:\n\n```html\n\u003cTwicImg src=\"https://assets.twicpics.com/examples/football.jpg\" /\u003e\n```\n\nThanks to the open source [TwicPics](https://www.twicpics.com/?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components) Components, delivering responsive images in your [Angular](https://angular.io/) projects has never been easier.\n\n## TwicPics configuration\n\n\u003cdiv id='create-an-account'/\u003e\n\n### Requirement\n\nThe only requirement is to have a TwicPics account.\nIf you don't already have one, you can easily [create your own TwicPics account for free](https://account.twicpics.com/signup).\n\n### Configuring `@twicpics/components`\n\nAn example of configuration is set within `app.component.ts` file.\n\nAll you have to do is set your configuration options to the desired values ([see documentation](https://www.twicpics.com/docs/components/angular?utm_source=github\u0026utm_medium=organic\u0026utm_campaign=components#setup-options)).\n\n## Examples\n\nAll the examples proposed in this project are located in the `app` directory.\nFeel free to inspire yourself from these different use cases to unleash the power of [TwicPics](https://www.twicpics.com/) in your own projects.\n\n## Questions and feedback\n\nFell free to submit an [issue](https://github.com/TwicPics/components/issues) or to ask us anything by dropping an email at [support@twic.pics](mailto:support@twic.pics).\n\n## Licence\n\n[![License][license-image]][license-url]\n\n[license-image]: https://img.shields.io/npm/l/@twicpics/components.svg?style=flat-square\n[license-url]: https://raw.githubusercontent.com/twicpics/components/master/LICENSE\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwicpics%2Fcomponents-demo-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwicpics%2Fcomponents-demo-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwicpics%2Fcomponents-demo-angular/lists"}