Category: 2. Angular 7

Template-driven forms can be used for many applications i.e. log in, submit a request, place an order, data entry etc. Now, let’s create the form. Follow these steps: Create a project First, create a new project named angular-forms by using the following command: Now, go to the project folder by using the following command. Now,…

Angular reactive forms follow a model-driven approach to handle form input whose values can be changed over time. These are also known as model-driven forms. In reactive forms, you can create and update a simple form control, use multiple controls in a group, validate form values, and implement more advanced forms. Reactive forms use an…

When you create Angular forms, it is important to know how the framework handles the data flow. There are two type of forms in Angular, reactive and template-driven and both follow the different structure to handle user?s input. Data flow in Reactive forms In Reactive form, each form element in the view is directly linked…

Angular forms are used to handle user’s input. We can use Angular form in our application to enable users to log in, to update profile, to enter information, and to perform many other data-entry tasks. In Angular 7, there are 2 approaches to handle user’s input through forms: Both approaches are used to collect user…

You can get errors in Angular because of many causes. Let’s take an example to see some specific types of errors. We have created an app named “testing-app”. In this app, we have a server and a button on the page which has the ability to create other servers. Here, “component.html” file contains the following…

In Angular 1, filters are used which are later called Pipes onwards Angular2. In Angular 7, it is known as pipe and used to transform data. It is denoted by symbol | Syntax: Pipe takes integers, strings, arrays, and date as input separated with |. It transforms the data in the format as required and…

In Angular 7, property binding is used to pass data from the component class (component.ts) and setting the value of the given element in the user-end (component.html). Property binding is an example of one-way databinding where the data is transferred from the component to the class. The main advantage of property binding is that it…

Angular facilitates us to bind the events along with the methods. This process is known as event binding. Event binding is used with parenthesis (). Let’s see it by an example: component.html file: It will give an output that “No Server is created”. Now, we are going to bind an event with button. Add another…

In Angular, String interpolation is used to display dynamic data on HTML template (at user end). It facilitates you to make changes on component.ts file and fetch data from there to HTML template (component.html file). For example: component.ts file: Here, we have specified serverID and serverStatus with some values. Let’s use this in “component.html” file.…

Databinding is a powerful feature of Angular. Angular Databinding is used for communication. It is used to communicate between your TypeScript code (your business logic) and the other component which is shown to the users i.e. HTML layout. Databinding is necessary because when we write the code in TypeScript, it is compiled to JavaScript and…