Be A Programmer In Angular 2+

Attribute binding Attribute binding is also a type of one way data binding. In Angular few properties or Attributes are not treated as properties. Hence we can't use property binding and interpolation on such attributes. If we try to do so, that through compilation errors.  Examples : colspan and rowspan. when we try to use interpolation or property binding on the above attributes, there will be a compilation error as follows.  Uncaught Error: Template parse errors: Can't bind to 'colspan' since it isn't a known property To avoid this type of problems we come across attribute binding. This attribute binding can be done along with either with interpolation or property binding. Syntax: [attr.colspan]="value" or attr.rowspan="{{Value}}". Here attr. will convert the attributes to accept interpolation or property binding.  By this way we can use attribute binding,  Example Program: Create a sample component using f...

Property Binding in Angular What is Property binding ? 1. It is one type of one way data binding from Controller to View but can be used on the properties of HTML elements.  2. This binding can not be used between the HTML elements like interpolation to display the value's. 3. This can be indicated using [propertyName] ="Variable in controller". Explanation with a sample program Create a component using following command       1. Open command prompt or Terminal in Visual studio and type                              ng generate component sample --spec=false The above command creates 3 files   (a). sample.component.html  (b). sample.component.ts   (c). sample.component.scss   Code in sample.component.html <input [type]="typeValue" />       sample.component.ts import { Component, OnInit } ...

Setup and Installation for Angular  Environment Requirements 1. Required Node with minimum  10+ Version  for latest version of angular.     Reference link for Node:    Node JS 2. Visual Studio or Atom IDE's for Application Development with Javascript and Typescript Support.    Reference Link for Visual Studio:  VS-CODE Checking Node version 1. Open new command prompt and type (node -v or node --version). This should be output 10+ Version.             Command : node -v or node --version Creating Angular environment Using npm 1. Open command prompt and use either of one following command prompt        (a) Command to install angular Globally through out the system: npm install -g @angular/cli        (b) Command to install angular Locally: npm install @angular/cli Using command (a) there is no need to install angular-cli for ever...

Interpolation in Angular Introduction 1. Interpolation is one type of binding where we can bind the data for display. 2. We can perform mathematical operations, conditional operations e.c.t. 3. Interpolation always converts the result to string type before display or before assigned. 4. Interpolation can also be used for element properties whose return type or expected type is string type. examples : type, placeholder e.c.t. 5. Interpolation can't be used for element properties whose return type or expected type is other than string. examples: required, readonly e.c.t 6. If we are trying to use interpolation for the element properties whose return type or expected type is other than string , then we wont get any errors but result's with the default value of that particular property. Examples 1. app.component.html 2. app.component.css 3. app.component.ts In app.component.html  <h1>Ways of using Interpolation</h1> ...

Data Binding in Angular 1. What is Data binding ? 1. Binding the model data between view and controller is called as Data Binding 2. In Angular Data Binding can be achieved in two ways: a. One Way Data Binding. b. Two Way Data Binding. One Way Data Binding  1. Binding the data from controller to view or view to controller is called one way data binding. 2. One Way data binding is again classified into two ways a. Controller to View. b. View To controller. Controller to view Data Binding  1. Binding the data from controller to view is called controller to view data binding. 2. Controller to view binding is again classified into 5 types a. Interpolation. b. Property Binding. c. Attribute binding. d. Style Binding. e. Class Binding.  V iew  to  Controller  Data Binding  1. Binding the data from view to controller is called View to controller Data binding. 2. Controller to view binding is again classified ...

MVC or MVVC Pattern In Angular MVC - Model - View - Controller 1. In Angular every component will follow MVC pattern. 2. MVC indicate's - Model - View - Controller. 3. Model is the raw data or the data from remote. 4. View indicate's look and feel. 5. Controller acts as the mediator between Model and View. 7. In angular view can be achieved by HTML and CSS , Model indicates the object Controller indicates data transmission between View and Model. 8. In Angular each component will have all Model, View, Controller. So Angular is called Component based MVC. 9. In Angular it follow's two way binding i.e.. Data transmission between Model - view - view - controller hence it is also called as MVVC. 10. So angular can be called as MVC or MVVC. Files Indicating MVC in Angular. Model - component.model.ts View - component.html , component.css Controller - component.ts, component.service.ts Note There is still a dilama and debet weather angular i...