1. Introduction In this tutorial, we’ll discuss pure and impure pipe in Angular. Understanding pure and impure pipe is very important to writing efficient Pipes and efficient application. By default, pipe are defined as pure in Angular which means Angular executes the pipe only when it detects a pure change to the input value. In…

1. Introduction In almost every project we have at least two environments: development and production. Usually there is a third environment as well, the staging environment. Usually the configurations for development environment are different than of production. Each environment has different configuration properties like API endpoint URLs. The common requirement is to define these properties…

1. Introduction Pipes are used for transformation of values. Angular provides several built-in pipes but sometimes the built-in pipes are not able to fulfill our specific requirement. Angular allows you to create your own custom pipe. Pipe is a class decorated with @Pipe decorator and a function to transform the value. This decorator @Pipe marks…

1. Introduction The main purpose of pipes is transformation. Pipes are used for transformation of strings, dates, currency amounts and other data. Pipe’s main purpose is only for display purpose. Pipes are used as reusable functionality which are declared only once and reused in the application. Original value ——> Pipe ——> Transformed value You can…

1. Introduction By default, Angular modules are eagerly loaded. This means that all NgModules are loaded as soon as the application loads. All NgModules are loaded whether they are required or not. This increases the load time of the page. This is not a good design. Suppose there are certain modules in your application which…

1. Introduction In this tutorial, we’ll discuss modules and NgModules in Angular. Angular applications are modular. If you create a simple Angular application using Angular CLI, you’ll observe that it has AppModule. Angular modules enables several important features like ahead of time compilation and lazy loading. A module in Angular is a container for a…

Sometimes the DOM events are not enough and there is a need to raise custom events. For example, a child component may need to emit an event and tell the parent component that it has updated itself. The parent component then listens to this event and may need to update itself. The flow of data…

Applications are built for users and it is obvious that users will interact with the application. User can fill input form and submit the form by clicking button. All these are examples of events performed by users. Whenever an event occurs, application should listen and respond to that event. Using event binding we can listen…

In this article we’ll discuss binding to the style attribute in Angular. We use style attribute to define inline styles to elements in HTML. Using style binding we can set styles dynamically. Binding to the single style The syntax for binding to single style is: Example For example, we can bind the width of a…

In this article, we’ll read how to bind to the class attribute in Angular. We can dynamically add and remove classes to an element using class binding. his is a very helpful feature from user interface point of view. There are many scenarios when we want to apply color coding based on some expression. For…