Background This error can occur when you have just started learning angular or are already an expert into it. In former scenario, this error will occur when you have created a new project using npm new command and are ready to deploy it. But once you run the command ng serve, you are presented with this error and the below stacktrace.     How to resolve Follow the below steps to resolve this error. Update Angular cli using command npm update -g @angular/cli Navigate to your application folder and open package.json file using a text editor. Search for the property @angular/cli under devDependencies. It willRead More →

In order to develop an angular application, you need to prepare a development environment on the system. This guide walks you through the process and if you follow it, then by the end of this post, you will be all set to start writing angular code. Softwares Required As a part of Angular development environment, you need to have some softwares/tools installed on your system. They are node.js : Provides runtime environment for javascript applications. npm: Stands for Node Package Manager is a package manager for javascript applications. It makes it easy to install packages required by an application via its command line client. ARead More →

Many times you want to detect a particular key press and perform some action when that key is pressed. Example, when capturing input from a user, you want to know when that input should be processed. Thus, there should be some sentinel value which should be considered as end of input from the user. Normally, enter key is considered to be the end of input. So, you need to know when is the enter key pressed. How would you do that in Angular? Read on !!! How to know enter key is pressed For determining which key was pressed in an input box, we needRead More →

Requirement Suppose user types something in an input box. There are many reasons why you would require this value such as for showing options based on this value, show user entered data in a span element, show a set of hidden elements on the basis of this value, greet user, send this value as a parameter in an ajax request and many more. When you are working on an angular application and capturing user input is required, an obvious question arises. How to do it? This post will guide you on that. Getting value of element There are a couple of ways that can provideRead More →

Event Binding : Meaning An action performed by the user on the HTML page is an event, typically using mouse or a keyboard. A user can type in a text box, click on a checkbox, right click on the page. All these are considered as events. Enabling the HTML elements to respond to user actions is called Event handling. In order to perform some specific actions when particular event occurs, an event handler function is required. Putting all these together, namely, adding support over an HTML element for a particular event and providing a handler function to perform action on that event is called EventRead More →

What is Data Binding?A view in an angular application is a component and a component is composed of a component class(written in typescript) and an HTML template. The component class contains properties and methods which represent the data of a component. HTML template of a component can access these properties and methods. As such the properties and methods are frequently used in the HTML template in order to extend its functionality and make it more dynamic. This sharing of component properties into its HTML template is done through Data Binding. Data Binding : Syntax Data binding between a component class and its HTML template isRead More →

What is a module? An Angular module is a logical group of components, services, directives and pipes which are related to each other. Example, consider a library management application. It has an inventory page which shows the list of all books in the library. This page will have an inventory component to display the page, inventory service to fetch and update data to the server, directives and pipes to format the data. All these will be a part of a module called InventoryModule(suppose). A module can have one or more components and services. A module can import other modules. There can be one or moreRead More →

What is angular? Angular is a framework which allows you to create web applications using javascript, html and typescript. Angular provides features such as data and event binding, routing, animations etc. Typescript used to write angular components follows javascript syntax, provides all object oriented features and is much easy to learn if you are familiar with any of the high level languages such as Java, C++ or C#. Typescript after compilation is converted to javascript only. Angular lets you define custom HTML tags and you can create a view that should be shown in place of those tags. Its name comes from the angle shapedRead More →

What is a component A component represents a view on the screen. Everything what we see on the screen is a component. A single page can be constituted of one component or many components. Also, a component can have child components. Example, a page can have a menu, a header and body. All can be contained in a single component or there can be a menu component, header component and a body component. Similarly, a single control on a page can be a component or a combination of components. Example, a table on a page can be a single component or it may be aRead More →