Angular

=================================================================================

Angular Application Projects

=================================================================================

1. Angular6Project

---

Prerequisite:

Node: 8.X

npm: 5.x

Upgrade npm:

Run PowerShell as Administrator

• Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
• npm install -g npm-windows-upgrade
• npm-windows-upgrade

Upgrade Node:

Download latest executable from here: https://nodejs.org/en/download/

Check Node Version:

node -v

Check npm Version:

npm -v

Download/ Upgrade Angular CLI:

• Fresh Installation: npm install -g @angular/cli
• Upgrade: npm install -g @angular/cli@latest

Angular CLI Version:

ng -v

Creating a new Angular 6 project and all the required files with --skip-tests option to skip generating test files:

ng new Angular6Project --skip-tests

Running the Angular 6 Project:

1. Go to the project directory: cd Angular6Project
2. Builds and launches the default browser and serves the application using the default port number 4200: ng serve --open (shortcut command : ng s -o)

Install Jquery and Bootstrap for Angular 6:

npm install bootstrap@3 jquery --save

Adding Bootstrap and JQuery References in angular.json file as follows:

"styles": [

"src/styles.css",

"node_modules/bootstrap/dist/css/bootstrap.min.css"

]

"scripts": [

"node_modules/jquery/dist/jquery.min.js",

"node_modules/bootstrap/dist/js/bootstrap.min.js"

]

Angular 6 routing

Creating employee(create-employee) component with no unit test files (--spec=false) and dedicated folder(--flat=true):

ng g c employee/create-employee --spec=false --flat=true

Creating employee(list-employees) component with no unit test files (--spec=false) and dedicated folder(--flat=true):

ng g c employee/list-employees --spec=false --flat=true

Why a separate routing module?

• Separation of concerns
• Maintainability

Generate routing module (app-routing) with no dedicated folder and include routing module to root (app) module:

ng g m app-routing --flat=true --module=app

There are 2 ways to create forms in Angular

1. Template Driven Forms ( All Codes are completely in HTML )

2. Reactive Forms (Also called Model Driven Forms and Reactive forms on the other hand allow us to build the form completely in code. )

With a reactive form, we create the entire form control tree in the component class code.

Classes for creating a form control tree:

• FormGroup
• FormControl

Reactive FormsModule:

formGroup directive: Binds 'form' element to FormGroup instance.

formControlName directive: Binds input element to FormControl instance

Angular form control and form group:

Both FormControl and FormGroup classes inherit from AbstractControl base class.

The AbstractControl class has properties that help us track both FormControl and FormGroup value and state.

### AbstractControl Class Properties:

• value
• errors
• valid
• invalid
• dirty
• pristine
• touched
• untouched

To access a FormControl in a FormGroup:

eg: employeeForm.controls.fullName.value

OR

employeeForm.get('fullName').value

AbstractControl class methods:

• setValidators()
• clearValidators()
• updateValueAndValidity()
• setValue()
• patchValue()
• Reset()

Nested Form Groups in Reactive Form:

To group the form elements in the HTML, encapsulate the form elements in a div element and use the formGroupName directive on that container div element. Bind the formGroupName directive to the skills FormGroup instance in the component class. Bind each input element in the HTML, to the corresponding FormControl instance using the formControlName directive.

Angular setValue() and patchValue():

• Use setValue() to update all form control but not a subset of form control.
• Use patchValue() to update a subset or all of form control.

Angular Form Builder:

FormBuilder reduces the amount of boilerplate code we have to write to build complex reactive forms

=================================================================================

2. Angular CRUD ( Angular6 )

---

Install JQuery and Bootstrap:

npm install bootstrap@3 jquery --save

Reading Data in Angular(Creating list employees component) :

ng g c employees/listEmployees --spec false --flat true

=================================================================================