Understanding @Output and EventEmitter in Angular

  Read full article on the Infragistics blog Angular is based on a one-directional data flow and does not have two-way data binding. So, how do you get a component to emit an event to another component? In Angular, a component can emit an event using @Output and EventEmitter. Both are parts of the @angular/core. … Continue reading Understanding @Output and EventEmitter in Angular

What are @HostBinding() and @HostListener() in Angular?

Read full article on the Infragistics blog To understand @HostListener and @HostBinding, you should have basic knowledge about directives in Angular. There are three types of directives in Angular: Component Attribute Directive Structural Directive The basic difference between a component and a directive is that a component has a template, whereas an attribute or structural … Continue reading What are @HostBinding() and @HostListener() in Angular?

How to Create Your First Angular Reactive Form

Read full article on the Infragistics blog Out of the box, Angular provides us with two types of forms: Template Driven Forms Reactive Forms In Template Driven Forms, you create controls on the component template and bind data using ngModel. With these, you do not create controls, form objects, or write code to work with … Continue reading How to Create Your First Angular Reactive Form

Simplifying Content Projection in Angular

In Angular, content projection is used to project content in a component. Let’s take a closer look at how it works:Content projection allows you to insert a shadow DOM in your component. To put it simply, if you want to insert HTML elements or other components in a component, then you do that using concept … Continue reading Simplifying Content Projection in Angular

How to upgrade to latest Angular CLI

To check which version of Angular CLI is installed on your machine, run the command ng –version as shown in the image below: As you see that on my development machine, Angular cli version 1.0.0 is installed. At the time of writing of this post, latest version of Angular CLI was 1.1.3. To upgrade to … Continue reading How to upgrade to latest Angular CLI

Communication Between Components Using @Input() in Angular

In Angular 2 a component can share data and information with another component by passing data or events. A component can be used inside another component, thus creating a component hierarchy. The component being used inside another component is known as the child component and the enclosing component is known as the parent component. Components … Continue reading Communication Between Components Using @Input() in Angular

Simplifying Two-Way Data Binding in Angular

There are three types of data bindings in Angular , they are as follows: Interpolation Event Binding Property Binding If you are coming from Angular 1.X background, you might be wondering that where is the two-way data binding? Remember, when first time you saw AngularJS 1.X demo, and was just blown away by power of … Continue reading Simplifying Two-Way Data Binding in Angular

Introduction to Angular Components

A component is a main building block of an Angular  application, and an application may have any number of components. We can consider a component a particular view of the application with its own logic and data. In AngularJS 1.0, there was the concept of controllers, $Scope, and directives to bind data and logic to … Continue reading Introduction to Angular Components

Exploring Attribute Directives in Angular

Attribute Directives are used to change the behavior, appearance or look of an element on a user input or via data from the service. Essentially, there are three types of directives in Angular: Component Structural directives Attribute directives In this post, we will learn how to create Attribute Directives in Angular . So let’s say … Continue reading Exploring Attribute Directives in Angular

Different ways of injecting dependency in an AngularJS Application

When you start learning the very first characteristics of AngularJS, you may come across something called Dependency Injection (DI): the premise that AngularJS injects dependencies whenever an application needs them. As a developer, our task is only to pass the dependency to the module and everything else will be taken care by AngularJS. To create … Continue reading Different ways of injecting dependency in an AngularJS Application