When creating a new Angular project, how many times have you thought of copying files and folders for an initial setup of your Angular project? I’ve done it a million times (okay, not million, but you get the point, right?).

Rationale behind using Schematics

Be it a personal project or an enterprise project, I always wish I could use my own template project to get a great kick off. I wanted to have my core module, graphQL module, all the Apollo dependencies automatically installed, ESLint, prettier and husky hooks configured and etc etc.. every time I started my project. BUTT, I always had to…


In this article I’d be talking about how to create a Reusable Directive in Angular for Authorisation purposes.

One of the most common requirements that I see in UI designs is the role based access control. Controlling the display of HTML components on the basis of roles and permissions fetched from the backend.

How many times have we used *ngIf directive with a really long conditional statement on a HTML Element to show/hide it from the view?

I’d be showing you why and how you can avoid using *ngIf directive.

User Permissions

First step is to fetch user Permission from a backend…


What are they, after all? When to use what!

I have been using Subjects in reactive programming. But, I have always faced difficulty in understanding when to use what type of subject. In this article I’d be going through the types of subjects.

First of all, RxJS is a framework for reactive programming that makes use of Observables, making it really easy to write asynchronous code.

What is an Observable?

In a nutshell, Observable is a function which returns a stream of values to an observer over time. Observer reacts to whatever values an Observable emits. It implements the Observer Design Pattern.

Observer Design…


Several times to take your JS to the next level

In this article, I’d be going through some of the practices that I’ve picked up over the years to write good and maintainable code.

Use DRY

Don’t repeat yourself is a principle aimed at reducing repetition of code, replacing it with abstractions to avoid redundancy. Duplicating code always ends with a mess. If you fixed a bug somewhere you need to re-patch it multiple times. Having less and non-redundant code saves time as well as increases maintainability.

Every piece of knowledge or logic must have a single, unambiguous representation within a system.

In the example below, I’m getting material of different type…


In this article we’d be going through the process of deploying Node application on AWS Elastic BeanStalk using Github Actions.

All this while I’ve been using TravisCI for my deployments, but when I got introduced to Github Actions, I feel there is no turning back. Github Actions make deployment of your web application super simple ❤.

What is Elastic BeanStalk?

AWS Elastic Beanstalk is an orchestration service that abstracts away some of hardware resources and details (e.g. setting up AWS components and containers), while still allowing the developer a range of choices when it comes to OS and programming language. Elastic Beanstalk employs Auto…


Dan Abramov’s Github Dashboard

Good frontend architecture is hard. Scaling frontend development so that many teams can work simultaneously on a large and complex product is even harder. In this article, we’ll talk about a recent trend of breaking up frontend monoliths into many smaller, more manageable components using Web Components.

First of all, what is Micro Frontend?

Micro Frontend is a micro service approach to front end web development. The concept of Micro Frontend is to think about a web application as a composition of features owned by different independent teams. Each team has a distinct area of business or mission it cares about and specialises in. …


In this tutorial, I’ll walk you through adding Google authentication to Flutter applications using the Firebase Authentication plugin and display user’s profile picture.

Step 1: We need to begin by creating a new Flutter project and adding the Firebase Auth package and Google SignIn to the pubspec.yaml file, make sure that you use the latest version of the package.

dependencies:
flutter:
sdk: flutter
firebase_auth: ^0.6.2+1
google_sign_in: ^3.2.2

Step 2: Now, register your project on https://console.firebase.google.com, …


Image courtesy: Demos with Angular

The new version of Angular came out with many new features and one of them is Drag and Drop Module. In this article we would be exploring the new Drag and Drop feature that is included in Angular Material by creating a To-Do list.

Getting Started

To begin, add or update the @angular/cdk dependency in package file of your project or run one of the following commands:

npm install @angular/cdk@7.0.0-beta.0
OR
yarn add @angular/cdk@7.0.0-beta.0

Now, include package in your app.module.ts

import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [BrowserModule, FormsModule, DragDropModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {…

Anjali Verma

Web Developer, loves to write about UI technologies

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store