All Projects → nitayneeman → Made With Love

nitayneeman / Made With Love

Licence: mit
🚀 An experimental project which demonstrates an Angular Package which contains Angular Elements and Schematics

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Made With Love

Val
VirtualDOM abstraction layer - give yourself better integration and full control over the DOM with any virtual DOM library that uses a Hyperscript-like API such as React and Preact.
Stars: ✭ 181 (+170.15%)
Mutual labels:  custom, components
Element Queries Spec
A spec for a Container-Style Element Query Syntax
Stars: ✭ 375 (+459.7%)
Mutual labels:  component, element
mask export
Export your mask elements as extension
Stars: ✭ 45 (-32.84%)
Mutual labels:  custom, element
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+277.61%)
Mutual labels:  component, components
Document Register Element
A stand-alone working lightweight version of the W3C Custom Elements specification
Stars: ✭ 1,123 (+1576.12%)
Mutual labels:  custom, element
Ngx Select Dropdown
Custom Dropdown for Angular 4+ with multiple and single selection options
Stars: ✭ 91 (+35.82%)
Mutual labels:  custom, component
React Querybuilder
A QueryBuilder component for React
Stars: ✭ 315 (+370.15%)
Mutual labels:  custom, component
React Modal Box
React Modal Box, is a simple dependency free and customizable React Component to display Modals on your application. Its simple event system allows you to place the modal in the root component of your application, and calling it with the simple mixins, allows you to be flexible. It also includes event handling mixins, so you can detect when the modal is being called or being hidden.
Stars: ✭ 126 (+88.06%)
Mutual labels:  component, components
React Fontawesome
A React Font Awesome component.
Stars: ✭ 662 (+888.06%)
Mutual labels:  component, components
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (+759.7%)
Mutual labels:  custom, component
Component Size
React hook for determining the size of a component
Stars: ✭ 224 (+234.33%)
Mutual labels:  component, element
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-8.96%)
Mutual labels:  custom, component
Yoshino
A themable React component library!Flexible Lightweight PC UI Components built on React! Anyone can generate easily all kinds of themes by it!
Stars: ✭ 216 (+222.39%)
Mutual labels:  component, components
React Video Renderer
Build custom video players effortless
Stars: ✭ 100 (+49.25%)
Mutual labels:  custom, component
Element Patch
An extension package based on vue and element-ui. 一个基于 vue 与 element-ui 的扩展包,提供数据驱动的表单渲染,菜单渲染,表格拖拽,权限控制等功能
Stars: ✭ 187 (+179.1%)
Mutual labels:  component, element
Switzerland
🇨🇭Switzerland takes a functional approach to Web Components by applying middleware to your components. Supports Redux, attribute mutations, CSS variables, React-esque setState/state, etc… out-of-the-box, along with Shadow DOM for style encapsulation and Custom Elements for interoperability.
Stars: ✭ 261 (+289.55%)
Mutual labels:  component, components
Vcomponents
VComponents is a SwiftUI framework that contains 40+ customizable UI components
Stars: ✭ 117 (+74.63%)
Mutual labels:  component, components
Thorui Uniapp
ThorUI组件库,轻量、简洁的移动端组件库。组件文档地址:https://thorui.cn/doc/ 。 最近更新时间:2021-10-01
Stars: ✭ 1,842 (+2649.25%)
Mutual labels:  component, components
Vue Gl
Vue.js components rendering 3D WebGL graphics reactively with three.js
Stars: ✭ 434 (+547.76%)
Mutual labels:  custom, element
React Components
React components
Stars: ✭ 47 (-29.85%)
Mutual labels:  component, components

Preview

Made With Love

npm Demo Downloads License

Installation · Usage · Disclaimer

ℹ️️ Description

A project that demonstrates how to build an Angular Package which provides a simple Angular Element. Also, it demonstrates how to make it addable with ng add using Schematics.

Check out this article for getting more information about the project.


🔧 How to Install

To Install using Angular, simply do:

ng add angular-made-with-love

This command will:

  • Add @angular/elements, @webcomponents/custom-elements and angular-made-with-love into package.json.
  • Run npm install.
  • Import MadeWithLoveModule into the root module of your host application.
  • Inject the polyfill’s script file into the scripts of your host application.

In case you want to do it manually, there are available CLI parameters for skipping the steps above: skipPackageJson, skipModuleImport and skipPolyfill.


👨🏻‍🏫 How to Use

Apply CUSTOM_ELEMENTS_SCHEMA on your host module:

@NgModule({
  imports: [...],
  declarations: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HostModule {}

Insert the following line into a template:

<made-with-love name="Nitay Neeman" url="http://nitayneeman.com" size="1.5" color="red"></made-with-love>

⚠️️ Disclaimer

This package is intended to be used inside Angular applications. In case you want to use it as part of an non-Angular application - go to this branch.


💁🏻 Contributing

This is an open source project. Any contribution would be greatly appreciated!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].