Wireframe/Sketched Angular (v8) application

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 Library

WiredJS is a web component library which offers sketchy hand-drawn like web components. Don’t forget to checkout their showcase of web components.

Wired Elements

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.

WiredJs Signup form built with Angular

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

• Update angular.json file for referencing wired-elements bundled javascript file. Make sure to restart ng serve command if it is already running.

"scripts": ["node_modules/wired-elements/dist/wired-elements.bundled.js"]

• 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.ts file, we need to provide schemas metadata to @NgModule decorator specifying value CUSTOM_ELEMENTS_SCHEMA. Now Angular will not complaint about WiredJS components.

Providing CUSTOM_ELEMENTS_SCHEMA in AppModule’s schemas metadata

• After setup, now we can start using WiredJS component. For example, to use wired-input control, add below code in app.component.html file. Note that we are using local reference to this element using #firstName.

<wired-input #firstName placeholder="Enter first name"></wired-input>

In app.component.ts file, we can use get reference to wired-input by reference and get/set values.

Accessing wired-input element in AppComponent class to get/set value

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!!!

Demo:

NgWiredjsDemo

Source Code:

ultrasonicsoft/ng-wiredjs-demo