fbpx

Tutorials

Navigating with Angular Router in Ionic 4

Navigating with Angular Router in Ionic 4

With Ionic 4, the recommended way to navigate between pages is through the Angular Router (if we are using ionic with angular of course). The unfortunate part of this change is that it’s not as easy as pushing and popping pages. Fortunately, the angular router does come with some benefits, especially when you have plans use your app as a webapp as well.

Conditional Statements

Conditional Statements

If you are reading this, then you should be familiar with flow controls like if statements. In JavaScript, if statements are used to control the flow of the app and make certain decisions. Angular has similar conditional statements called *ngIf. *ngIf is a directive. A directive is an attribute you can give a HTML element, and change the element’s behaviour or they way it looks. It’s possible to create your own directives in Angular, but for now let’s just work…

Read More Read More

Data Binding in Ionic

Data Binding in Ionic

Understanding The Data flow Mobile apps and Web Applications today work in a very simple manner that comprises with three steps Get some sort of information from the user Process that information with what ever algorithm you have formulated Output a certain result to the user Look at the top 3 apps you use on your phone. At some point, they have fulfilled all three of those points. What is the point of an app if you don’t get an…

Read More Read More

Working with HTTP in Angular

Working with HTTP in Angular

Building offline apps is all fun and great, but there are instances where you need to access external information. Actually, the majority of apps and web applications out there access external data. Whether it’s for authenticating users, getting the latest scores of the tournament or getting an updated news feed – all of these are possible with RESTful APIs. In this article, you will learn how to consume HTTP APIs in Angular. What is RESTful APIs REST stands for REpresentational State…

Read More Read More

Migrate to Ionic 4

Migrate to Ionic 4

After a long wait, Ionic 4 is finally at beta. This basically means there won’t be major changes from what they have released. If you are brave enough, you can even start building your projects in Ionic 4 or migrate to Ionic 4. I am one of the brave ones, and I am LOVING IT! The biggest change in Ionic 4 is its use of Web Components, removing its dependency to Angular. That means you can build Ionic Apps using…

Read More Read More

Firebase Promise

Firebase Promise

What is a Promise Promise represent an eventual (asynchronous) value. When you are using a method that returns a promise then that method will either resolve or reject, in any case of resolve or reject, it calls all the callback functions that have been assigned via the then() or catch() methods. Let’s discus further on these two methods: .then() and catch(): then() method in firebase returns firebase Promise containing any type. this method is called when the Promise is resolved….

Read More Read More

Events and Data Binding

Events and Data Binding

In almost every app, there is a need to change content on the HTML dynamically or receive some input from the user and then apply a change to the UI. Angular data binding gives you the tools to achieve just that – and the best part is that it’s super simple and convenient. In this tutorial, you will learn how to bind data from your TypeScript file to your HTML file. You may be wondering what I mean by binding….

Read More Read More

Text, Buttons and Images

Text, Buttons and Images

In this tutorial, we’ll be touching on Ionic Components – how do you use them and where do you find them. Before continuing, you need to have Ionic4 installed and know how to start and run ionic apps. Let’s start off by creating a fresh new Ionic4 project name LottoGenerator. As you might have guessed, our app will generate lotto numbers. Run the command below to create your project. ionic start LottoGenerator blank –type=angular Then run your project cd LottoGenerator…

Read More Read More