Hey Fellas. Ready to learn something new in Ionic 2?
If you are new to Ionic 2, don’t worry. Here are some links provided to you so that you can go through it and understand the basics of Ionic 2.
Before you go through this article you should have Ionic 2 set up on your machine, so that you can practically do and understand the steps required and have fun creating Ionic applications.
Today we will be going through a step by step process for creating an item list with data passed to Local Storage. Let me put this in more simple words, we will be adding item to a list and deleting them from the list with the help of windows local storage.
Let’s start coding….
Before starting let me introduce you to the flow of the pages that we are gonna create so that you don’t get confused.
Homepage(where you gonna write the name that you want to insert into the list and click ‘ADD’ button)=>Listpage (Where it will show the name on the list that you have added)
So we have 2 pages :
Now follow the steps:
First, Create a blank project.
For those who are new to Ionic 2 follow the link provided below to create a blank project.
Your blank project when run on a window screen will look like this:
Second, Add the required pages through command prompt to your project.
ionic g page lists
Third, In the main page we will create a list of items. I guess taking an example along with this article will make it more clear to understand. Let’s say we want to create a list of students studying in a class.
When we created our project we can find the pages in (your Project Name)->src–>pages folder.
The ‘pages‘ folder will contain the following files after generating the required pages:
We will add an input and a button to the homepage which will insert the input data to the list on the next page.
The home.html will look like this after the update:
The home.ts will have following changes:
Now you can just check and see whatever you have created so far on the windows screen by running the following command on the command prompt:
I hope you could see the output and it runs fine… If yes then, well you are halfway through it and it will just take some more time to complete the task… So don’t get bored and go with the flow…
Fourth, now onto the next step. Here we are going to create a list and enter the input data to the list.
I’ll just give a gist of what we are going to do or say what will the code do. As we will enter the name in home page and click on the button, the name will be send to the local storage and then we will get the data from local storage where we need it to be shown. I hope you got what i am trying to say. And if not, don’t worry the code is self-explanatory.
Moving to the code of lists page.
Lists.html will look like this:
And the lists.ts file will have the following changes.
This is it…..
Just one last step and it’s done(note this because it’s an important step):
You should create a page global:
ionic g page global
In the global.ts file just add the following code outside the export class:
Yes, now it’s done….
Now it’s time to see the demo. To see the demo of what you have created run the following code in command prompt.
The demo project looks like this:
I hope you liked reading and gaining some knowledge. Congrats you just did a wonderful job.
Note: I know I promised for a list of items with a delete button. So, don’t worry this link will guide you to the page if you want to do so.
You can download the Source Code of this article as bonus from my Github repo.
Good Luck. Hope to see you soon with more interesting articles. Your suggestions and advice are most welcome.
In the next article we will be messing around doing the same task but with ‘webSql’.