Ionic 2 components (Part 1)

Let's learn some of the useful components in ionic 2. "Action sheet" - Action sheets are nothing but a dialog in which the user can choose from a set of options. It is normally shown as a popup above the page. This action sheet contains an array of buttons with properties such as

Sample Code:

Creating a simple search page in Ionic 2 application

An ionic search bar can be created to bind to a model so that when ever there is any change in that element will emit an input change. (ionInput) attribute callback will be triggered. In this below example we are going to create a search page to list a list of topics that can be filtered using search bar

Add below code in .html file

A pull down effect (pull-to-refresh functionality) to load asynchronous data in ionic 2.

We are going to use "ion-refresher" which comes by default in Ionic. This can be achieved by adding the "ion-refresher" as a child to the "ion-content" HTML. Create a callback function for "ionRefresh" at the respective typescript file. The pulling icon and the spinner is provided by default at the refresher.

Theme Ionic 2 Application - Customize and modify default theme layer of ionic application

Ionic is built on top of Sass, which allows us to set some default styles. SASS is nothing but a "CSS preprocessor" which is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. Some examples of CSS preprocessor include: Sass, LESS etc.

Storage in Ionic 2

Storage in ionic 2 can be used to store data key/value pairs. We can also store JSON Objects. This Storage can work using may storage engines, here it will choose the best based on the platform. If the application runs in native platfrom it will use SQLite where as if it is in browser it use IndexedDB. Follow the steps to use Storage,

Angular directive to check the scroll position of an element with Example and Demo

Angular Directives are markers on a DOM element which attach a special behavior to it. Here in this example the directive "onScroll" listens to a scroll event. The scroll position from the element is found using scrollTop.

What is hybrid application and why.?

Hybrid applications are web applications, Runs in the native browser, Developed using HTML, CSS, JS Frameworks, Wrapped in a native application using platforms like Cordova, Re-use their existing skills in web development, Being built on one single base, can be affected to multiple platforms, and Common UI for better user experience

Find Device Network enable and disable status in ionic - cordova app

In Ionic application the event “offline” and “online” can be added using addEventListener(). These events are attached to the document. The following are the sample codes, the respective callbacks will get fired once the device data connection enabled or disabled.

Creating a Android application using ionic framework.

Ionic is a framework which is an open source tool for developing hybrid mobile applications. Ionic framework is build on top of cordova. Hybrid mobile applications are nothing but mobile applications which are build using HTML, CSS, and JavaScript. Follow the simple steps to create a HelloWorld Android App and run it in your android device.