In this post, we will learn how to write unit testing for data-binding in a component. Before diving into the examples, let us try to understand a few basic methods which we use frequently.

Note: Before going through the session, I recommend you to understand what, why, and how to use unit testing in angular here is the link

Test-bed

Test-bed is used to configure and initialize the unit testing environment and provide methods for creating components and services.

TestBed can be imported from “@angular/core/testing”.

Methods in TestBed package

configureTestingModule: By using this, we can configure all the required modules/components/services…

Unit Testing

Unit testing is a technique to test an individual module or a component or a simple function to know whether we are able to achieve all the use cases and scenarios (Positive or negative) required.

Unit testing helps us to reduce the bugs/issues in the testing either for newly implemented code or for the enhanced features.

There are many tools for writing and executing unit testing. We can implement unit testing using Jasmine, Cypress, Jest and many more.

Unit testing in Angular

Unit testing in angular uses Jasmine as Testing framework and Karma as a test runner tool for running and executing tests in…

In this post we would learn three powerful operators when using http calls in angular with a small http-operators library.

Usage and Scenarios without HTTP-Operators

Let us first understand previous scenarios and usage without using these operators.

1. When we want to cache the response data completely from the API response into local storage we have to use localstorage.setItem(‘some key’). Here we may need to check whether the API response is an object or string, need to convert them accordingly, and need to be stored in the local storage.
2. If we get an error during HTTP calls and if we want to retry the HTTP calls…

Arrow functions are the functions which has been introduced in ES2015. Considered as ES6 features.

Arrow functions do not use any function keyword, whereas JavaScript functions uses a function keyword for declaring the functions

Arrow functions will not differ with the syntax, but also it differs in the context of “this” keyword. The working mechanism of “this” keyword varies from the traditional functions and Arrow functions.

The function calling is same in traditional and arrow functions

Traditional Functions Declaration

var traditionalFunction= function(){
    console.log('Arrow function example');
}traditionalFunction();

Arrow functions Declaration

const arrowFunction = () => {
    console.log('Arrow function example');
}arrowFunction();

The above arrow function is…

Basic Ionic 4 Application Setup

ionic start open-social-media blank

The above command creates a project with “open-social-media”.

What can we expect from this session ?

We will create a set of button with social media icons. When User clicks a particular social media icon (Facebook, Instagram, YouTube and Twitter) it will check whether the respective native app is installed or not.

If installed it will navigate to a page or user profile of the respective native app otherwise it will navigate to a page or user profile of the browser.

Step 1:

Creating an HTML social media icons with a click event and method (Which would be defined in step 4)

<ion-header>
  <ion-toolbar color="primary">…

What is Vue.JS

1. Vue.JS is a popular JavaScript framework for building user interfaces.
2. The Vue.JS library will mainly focus on building the user interface.
3. Vue.JS does not worry about other features or other places of development like routing, HTTP Requests, but it has a good eco-system where other libraries can be integrated and used inside the Vue.JS easily (State management — Vuex, Routing — Vue router e.c.t)
4. Vue.JS follows MVC architecture.
5. It has its own extension files i.e… Dot Vue (.Vue)
6. Current version of Vue.JS is 3.x
7. Vue.JS is capable of providing single page application

Why to use Vue.JS

1. We can find any simple and complex solutions…

Introduction

General JavaScript functions can’t be interrupted in the middle of a function execution, once the function is invoked until function execution completes. (i.e… Either by returning some value from the function or throwing error inside the function).
When we want to execute functions which can be interrupted or which can execute after a while once execution is started then ECMAScript-6 came up with a new type of functions called Generator Functions.

Definition

A generator function is a function which can be interrupted or which can execute after a while once the execution is started is called Generator Functions.

Generator functions are…

Before going to all different ways of using ngIf (Conditional Rendering) in angular, i request you to understand the basic usage of ngIf from this link.

To understand all the different ways let us consider a scenario

Scenario

Comparing two numbers and display which is greater.

Use Cases

Case 1: Compare two variables, let say firstVariable and secondVariable , if the firstVariable is greater than secondVariable then show “First is greater” in a paragraph.

Case 2: If fistVariable is not greater than secondVariable then show “Second is greater” in a paragraph

To handle above scenario we can use two ways or methodologies as…