Standard Angular Two Way Data Binding is by using the [(ngModel)]=”model”.

In this article, I will show how we can create a custom component and using the “BANANA IN A BOX” syntax [()] for Two-Way Data Binding without using the ngModel.

For Example: <my-input [(value)]=”value”></my-input>

What is “BANANA IN A BOX” [🍌]

Banana in a box it just a template syntax for Two-Way Data Binding
and it combines the property binding and the event binding.

So instead of writing it explicitly:
<my-input [text]="val" (textChange)="val=$event"></my-input>

We can leverage the shortened syntax:
<my-input [(text)]="val"></my-input>

Why is it named “BANANA IN A BOX”?

The naming assists us in remembering the order of the brackets of the Two-Way Data…

Most of us might familiar with this syntax:

TL;DR In this article I will show how we can create a toggle button with SCSS.

In this article I will show how we can implement the following Array methods
forEach, map, filter, find and reduce by extend the Array.prototype
just like polyfill

Polyfill

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

This is naive implementation so we will not check validity of given parameters

forEach

The forEach() method executes a provided function once for each array element.

What is Prettier?

Prettier is an opinionated code formatter with support for many languages and integrates with most editors.
It removes all original styling and ensures that all outputted code conforms to a consistent style.

Why you want to use Prettier?

• You press save and code is formatted
• No need to discuss style in code review
• Saves you time and energy
• Consistent code style

Setup Prettier with Angular CLI & WebStorm

Github Example

Step 1: Install Prettier

First, we want Install the Prettier package to our project.

npm install --save-dev --save-exact prettier

Step 2: Add Configuration File

lets create a new file .prettierrc in the root of our project
Example Configuration

{
  "singleQuote": true,
  "semi": true 
}

• singleQuote: Use single quotes instead of double quotes
• …