Understanding Services and Dependency Injection

We’ve all worked with Components and used component communication, but what do we do if we want to share data or logic across components? WE BUILD SERVICES. Let us try to understand what exactly services are. So, a service is basically a class, but with a focused purpose. With services, the code becomes easy to… Continue reading Understanding Services and Dependency Injection

Modules in Angular

What is an Angular Module? A class with an @NgModule decorator which organizes the pieces of an application and extend our application with capabilities from the external libraries. To start with, every angular application has a root application module, called AppModule and a root application component, called AppComponent. The AppModule bootstraps the AppComponent. Looks like… Continue reading Modules in Angular

Using Template Reference variable in Angular

In this article, we will discuss the use of a template reference variable for component communication. A template reference variable is used to give reference to a DOM Element, a component, directive, or a web component within a template. This variable can then be used anywhere inside the template. This is done using a # symbol inside… Continue reading Using Template Reference variable in Angular


In Angular, there are two types of forms: — Template Driven Forms — Reactive Forms If you are new to forms, understand these here. In this blog post, we will learn how to create custom validators for Angular Reactive Forms. So, to start with, I assume that you have already created a project using ng new. Now, suppose we have… Continue reading REACTIVE FORMS FOR BEGINNERS

Add Bootstrap to your Angular CLI Project

This article will help us understand the usage of bootstrap framework within Angular. To understand a little about bootstrap, Bootstrap is the most popular HTML, CSS, and JavaScript framework for web front-end development. It’s great for developing responsive, mobile-first web sites. Bootstrap in Angular Step 1. Create a new Angular Project So, to apply bootstrap to… Continue reading Add Bootstrap to your Angular CLI Project

Creating Custom Pipes in Angular

Previously known as Filters in AngularJS, Custom Pipes can be of two types. Pure and impure custom pipe. Pipe takes an input and returns an output based on the output of transform function evaluation. Usage of Pipes Angular has many built-in pipes. In this article, we’ll see how to create a custom one. Steps Involved In… Continue reading Creating Custom Pipes in Angular

Using @Output and EventEmitter

So, I have an event in one component and I want it to get handled in another component. Does Angular allow me to do that? Big yes! In @angular/core, we have @Output and EventEmitter which allow us to emit event from one component to another. Let us see how to do this. So, to execute… Continue reading Using @Output and EventEmitter

Understanding Component Communication using @Input()

Want your components to share information? Yes, they can! Say you have two components, a parent component (PC) and a child component (CC) and you want the data to move from the parent component to the child component or vice versa, you use COMPONENT COMMUNICATION/INTERACTION. There are multiple ways to achieve that. This article focuses on… Continue reading Understanding Component Communication using @Input()

Custom Directives in Angular

For those who do a lot of angular, you might have used ng-bind, ng-init somewhere in your project. These are the built-in directives that are provided to us by the angular team. We’ll see how to create our very own directive in angular. So to create one, we need to understand different types of custom… Continue reading Custom Directives in Angular

Data Binding in Angular

To understand data binding in angular, we need to know the meaning of binding the data. To put it simply, when the data changes its value, all the elements bound to it reflect changes automatically. Data Binding can be both one-way or two-way. There are 4 types of Data Binding in Angular: Interpolation Property Binding… Continue reading Data Binding in Angular