Angular Tutorial

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

 In This topic we are going to look at Data Bindings and how angular keeps both view and component in sync. we will see what techniques we can use to keep component and view in sync. Data Binding in Angular ➤➤ In simple word data binding is a technique which keeps component and view in sync in respect to data. Whenever user updates data in view, angular updates the component and when component get any new data angular sync it with view. The angular data binding can be classified in two group ➣ 1. One-way Binding 2. Two-way Binding One-way data binding ⮞ In one way data binding data flows in one direction, either from component to view or from view to component. To bind data from component to view or html we can use property binding or Interpolation. Interpolation  ⮞⮞ If you want to display read only data in a view template then we can use angular interpolation. The interpolation allow us to place the component property name in the view template, enclosed in  curly brace...

In this topic we will look at Angular Components and its metadata properties. What is Angular Component ? We can say Angular component is the main building block of angular application. The component contains data and logic which defines the behavior's and looks of the view. i.e. UI Page or HTML page. Syntax to create angular component ng generate component ' yourComponentName ' or in short ng g c 'yourComponentName'.  The angular component are javascript classes which is defined using @Component Decorator. The Component is responsible to provide data to view or html. Angular does this by using Data Binding to get the data from component to view or html. An angular application can have any number of components and each components plays there own role in a angular application. The components contains three main building blocks: 1. Template 2. Class 3. Metadata Template or view or HTML file Templates are nothing but HTML code with Angular Template Syntax, without ...