Are you tired of building typical Material Design/Bootstrap and other design system websites and wants to build something sketchy for fun? If yes, then let’s build one!
WiredJS is a web component library which offers sketchy hand-drawn like web components. Don’t forget to checkout their showcase of web components.
WiredJs has good examples about how to use with React and VueJs but not for Angular, hence I thought let’s create one like below image.
Building WiredJs Sign-up form with Angular
- Create a new Angular project (v8 used in this example)
ng new ng-wiredjs-demo
- Change command line directory to new project
- Install WiredJs library from npm package. You can install individual web component as well. Checkout WiredJs documentation for details.
npm install --save wired-elements
angular.jsonfile for referencing
ng servecommand if it is already running.
- Before we can use WiredJS element, we need to tell Angular that we are going to use some unknown tags in HTML and these are custom schema. In
app.module.tsfile, we need to provide
@NgModuledecorator specifying value
CUSTOM_ELEMENTS_SCHEMA. Now Angular will not complaint about WiredJS components.
- After setup, now we can start using WiredJS component. For example, to use
wired-inputcontrol, add below code in
app.component.htmlfile. Note that we are using local reference to this element using
<wired-input #firstName placeholder="Enter first name"></wired-input>
app.component.ts file, we can use get reference to
wired-input by reference and get/set values.
And we can use similar approach for other wired component to set binding whenever possible and HTML references to work with.
Hopefully there will be better integration for Angular in future from WiredJS!!!