Angular Tutorial

In Previous article we have learnt about Angular Forms , In this article we will look into services and dependency Injection in Angular. What is Angular Services? Angular Services are the piece of code or logic that are used to perform some specific task, A code that you can use in many components across application. Also you can say that Angular Services are objects that get instantiated only once during the lifetime of an application. Services contain methods that maintain data throughout the application. The main objective of a service is to organize and share business logic, models or data and functions will multiple component of an application. Services can be implemented though dependency injection. What are Angular Services features? Angular Services are simply typescript classes with the @ Injectable decorator. This decorator tells angular that this class is a service and it will be injected into components that need this service.  Service are used to share code across mult...

In Previous topic we have learnt about Angular Pipes , in this article we will learn about angular form and subsequent topics. What is Angular Forms ?  Forms are integral part of any application or you can say that forms are the building blocks of any application. You can use forms to collect data from User. We can say Angular Form module consist of three building blocks: a. Form Control ➢ In Angular, Form Control are the classes that can hold both data and validation information of any element in form. FormControl extends the AbstractControl class, which enable it to access the values, validation status, events, etc. b. Form Group ➢ In Angular, Form Group is a collection of  FormControl. FormGroup is used with FormControl to track the value and validate the state of  FormControl .  FormGroup  aggregates the value of each child  FormControl  into a single object using each control name as key. If one control in a group is invalid, the entire group i...

In Previous topic we looked into Angular Directives , in this article we will see Angular Pipes. What is Angular Pipes? Angular Pipes takes the raw data as input and then transform the raw data into desired format. we can also say that angular pipes transform the data into specific format before end user see. Syntax : Expression | pipeOperator[:pipeArguments] The Angular pipes are divided into two part : built-in Pipes and custom Pipes. Built-in pipes are again categorized as parameterized pipes and chaining pipes. Some of the built-in pipes are date pipe, uppercase pipe, lowercase pipe, currency pipe, number pipe etc. Below example will show you unformatted and formatted data using pipes. If you run below code you will see data is not formatted. Now we will use pipes to format these data as show below:  Parameterized Pipes ➤ We can say parameterized pipes are something in which we can pass any number of parameter using colon i.e. " : ". In below code we will see Date and C...

In this topic we will look into angular directives and you can check our previous topic on Data Binding in angular application . What are Angular Directives?  Angular Directives are the elements which are basically used to change the behavior's or appearance of DOM(Document Object Model) element, Or you can say that directives are basically use to extend the power of HTML attributes and to change the appearance and behavior of DOM element. Types of Directives ➤➤ There are three types of directives based on behavior: 1. Structural Directives   ⮚   Structural Directives will shape the HTML view by adding or removing the element from DOM. There are three structural directives available: i. NgFor (*ngFor) 🠞 ngFor is built-in directive and belongs to structural directives. It is similar to for loop used in many programing language like java. So ngFor directive is used to iterate over collection. The Syntax used for ngFor =  *ngFor=”let <value> of <collectio...