Creating custom PIN pad component in Ionic 3

Hey there, In this tutorial we will learn how to create a Component in Ionic 3 by creating a Ionic 3 PIN component.

As a end product we will have a reusable component for pin pad, below is end product screen shot

According to Ionic “ Components in Ionic are reusable UI elements that serve as the building blocks for your mobile app. Components are made up of HTML, CSS, and sometimes JavaScript”

Assuming you have Ionic installed on your machine. If not first you need to install latest version of node.js on your machine, Once node is installed on you machine you can run command

npm install -g cordova ionic

Above command will install latest version of ionic and cordova on your system. Once Ionic is installed on your system you can go ahead and type below command to create a blank ionic application.

ionic start FirstApplication blank

To ensure things are working fine, navigate to the FirstApplication folder on your system and fire up command prompt and type in

ionic serve

if everything goes well your browser should fire up and a blank ionic page should come up.

You can go ahead and open the FirstApplication Folder in favorite text editor of your choice, for me I am going to use Visual Studio Code.

Now we are going to use Ionic cli to generate boilerplate code of Component for us. Once inside the source code directory again fire up cmd and type in

ionic g component pin

Once we have component skeleton generated by cli we can go ahead and design for the pin pad. We are going to use ionic grid to create a grid like structure. its pretty simple design. we will be creating 4 rows, each containing 3 columns

the Idea is simple, below piece of code is a ion-grid , which has 4 ion-row, each row has 3 ion-col to represents buttons from 1to 9, last row has number 0 in the middle

at the end we have two buttons to Clear the input entered and Ok to close the pin Component and pass pin entered by user to the caller.

each button has a handler associated with it which basically passes associated number pressed.

Now that we have the front end ready, we can set the corresponding logic

This is pretty standard code, one line 1 we are importing required decorator from the angular code. below is the use of each of those.

Component : @Component decorator is used to create a component. on line 4 you can set the selector for this component. where ever this component is required in the application the user can simply type in <pin></pin> to use this component. On line 5 we specify the front end html of our pin pad.

Input : @Input is used to pass any input to the component by the caller. In our example parent can pass the title. if no title is passed by the parent then default title of “Enter Pin” will be used.

Output: @Output decorator is used to send back any output from the component to the caller. In out example we will be passing back the pin entered by user to the caller.

EventEmmitter : EventEmitter is used by the component to generate the event, The parent/caller of the component then subscribe to the event to get the output.

Once we have the front end and the logic ready we need to import the CompoenentModule to the app.module.

Now we are in position to use our custom component inside our application.

Modify the home.html code

In line 16 we use <Custom-pin> tag, this is the selector we specified for our component, pagetitle is the @Input decorator, this is being used to set the title of the componenet. using (change) we are listening to the event emitted by the component to get the pin.

below is the code for the back end i.e. home.ts

We are getting the pin at line 20. and displaying on the page.

the complete source code is available at https://github.com/pankajbhandari08/customPin