Author: Faris Khalil

  • Angular Card

    <mat-card> is a content container for text, photos, and actions in the context of a single subject. Basic cards The most basic cards require only a <mat-card> element with some content. However, Angular Material provides several preset sections that you can use inside <mat-card> : Element Description <mat-card-title> Card title <mat-card-subtitle> Card subtitle <mat-card-content> Primary card content.…

  • Angular AWS

    Prerequisite Create angular application Let’s start with creating our Angular project. First, we need to install the latest version of Angular CLI by running the following command. After running the above command, you can verify the latest CLI version by running the ng version. It will show the version as below: Now, let’s create a…

  • Angular vs React

    Angular and React both are related to JavaScript but there are a lot of differences between them. Here, we are going to compare both of them and also explain their similarities, differences, advantages and disadvantages etc. Comparison Index Angular React History Angular is a TypeScript based JavaScript framework. It is written in TypeScript. Angular is developed…

  • Template-driven Forms

    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

    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…

  • Data Flow in Angular Forms

    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 7 Forms

    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…

  • Angular Error Fixing

    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…

  • Angular 7 Pipes

    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…

  • Angular 7 Property Binding

    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…