Be A Programmer In Angular 2+

Class Binding When we want to bind CSS classes either from typescript or class OR based on conditionals we can go with the concept of Class Binding. Class binding in angular can be defined in as follows : <element [ngClass]="condition or ternary or multiple CSS classes"> </element> ng class can be used in many different ways in angular which are as follows: 1. ngClass with ternary operator:  <element [ngClass]="condition ? 'class1' : 'class2'"> </element> from above when condition is true 'class1' will be applied to the element else 'class2' will be applied. 2. ngClass with condition in object format: <element [ngClass]="{'className': condtion}"> </element> When we have only one condition and one class to be applied we can use above syntax. 3. ngClass with multiple conditions in object format <element [ngClass]="{'class1': condition1, 'class...

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