Angular

Angular Material

Reference links
https://medium.com/@balramchavan/best-practices-building-angular-services-using-facade-design-pattern-for-complex-systems-d8c516cb95eb

Angular Debug option

https://medium.com/front-end-weekly/a-guide-to-debugging-angular-applications-5a36bd88b4cf

https://offering.solutions/blog/articles/2016/10/16/how-to-debug-an-angular-application-with-chrome-and-vs-code/

https://angularfirebase.com/lessons/methods-for-debugging-an-angular-application/

Angular Flow
     In angular application we have flow from angular.json --> index.html --> main.ts --> app.module.ts --> app.component.ts/app.component.html


Angular
https://angular.io/guide/releases

What is Angular?
          a. UI framework
          b. SPA  ( Single Page Application)
          c. To build Cross platform apps
                We can create native apps, desktop apps and web apps using angular.
                For mobile :
                       https://ionicframework.com
               For Desktop
                    https://universal.angular.io
              For WebApps
                   https://angular.io

Why to use Angular :

          1.  It is a framework, complete framework for UI.
          2.  Uses component based approach.
       
Difference between  Angular 1 vs Angular 4:

1. Angular1 uses javascript. Angular 4 uses typescript.
2. Scope was used to bind the data or share the model between View and component in Angular1. In angular 4 we will use classes.
3. Angular4 there is no concept of digest cycle.

Difference between Angular2 and Angular4
1. Upgraded the typescript version in Angular4.
2. @angular/animations was part of @angular/core.


Angular Third party library
https://www.primefaces.org/primeng/#/setup

Building Block of Angular

Component --> This contains html, css and logic in .ts  ==> Component
Pipe            --> Help to do run time data change . Data manipulation ==> Pipe , PipeTransform
Service       --> That connect to third party or api's ==> Injectable
Routing      --> To manage the pages and menubar   ==> NgModule , Router
Module      --> All(Component, Pipe, Routing, Service) Declarations done here ==> NgModule
Data binding (Two way and one way)

Every angular application must/will have
a. one main module
b. one main component

File name in angular will be mentioned basing on there use

for module it will be <<filename>>.module.ts
for component it will be <<filename>>.component.ts
for service it will be <<filename>>.service.ts
for routing it will be <<filename>>.routing.ts

mostly each of the ts file will have following

//To import module file or another thing that help to build file
import

//decorator (metadata)
@

//To export or expose to external 
export

Decorators : Below are few decorators we have 

 @Ngmodule()

 @Component()

 @Input()

 @Output()

 @HostBinding()

 @HostListener()

 @Directive()

 @Injectable()

Module

  FormsModule

  HttpClientModule

Library

  HttpClient

         

  ElementRef 

         -nativeElement

  ReactiveX (rxjs)

        Observables

             have method subscribe() 

         subject

Angular suggest not to have more than seven files in a folder and the same is folder by angular-cli.

Angular Arctitecture

To create a angular solution give a command
ng new <<solutioname/ Appname>>

Eg:
ng new LibraryManagment

To

To start the solution from Node then give the below command

 npm start

To create a component:
    run "ng g component <componentName>" g stands for generate

Eg:
  ng g component Student

To load npm modules then use
npm install or npm install -verbose

To clear cache use
npm clear cache

withtout USing CLI:
https://github.com/AngularClass/angular-starter


https://www.google.com/search?q=can+we+start+angular+6+without+cli&spell=1&sa=X&ved=0ahUKEwiG2cW2ptrhAhVkneAKHf5VDUkQBQgrKAA&biw=1366&bih=657



Angular Folder structure and Files

Files :

1. tsconfig.json       - This is typescript configuration file which helps to transpile typescript to
                                   JavaScript.
2. package.json      - This file can be created manually by using the command "npm init". It      
                                  contains Description, package name and start commands
                                  dependencies - contains the name of packages/library which will be used for
                                                            development  and as well as required to run in production.
                                  devdependencies - contains the name of packages/library which will be used for
                                                                development only.
                                 run "npm install" to restore all the packages
                                 ^ --> tries to get the same version of the library
                                 ~ --> tries to get the latest version of the library
3. package-lock.json - Child dependency

4. tslint.json               - It will give us the warnings, in case we are not following best practices when
                                       writing the typescript code. The standards are mentioned in the file.
5. protactor.config.js - This is configuration file for End 2 End testing. When I created a project
                                        using cli on 4/18/2019 I didn't get this file
6. karma.conf.js         - This is configuration file for Unit Testing. When I created the project using
                                        cli on  4/18/2019 it was created inside src folder. This uses the library of
                                         jasmine.
7. .angular-cli.json     - This is configuration file for angular CLI.  when I created the project using
                                         cli on 4/18/2019 it created as angular.json
8. README.md        - Description or step for application


Folders

1. e2e                     - This is the folder where all End 2 End test cases resides.
2. node_modules  - This is folder where all our downloaded libraries are saved.
3. src                     - This is folder where all our codes are and we will be making changes here.

Files and Folder inside src

Files in SRC folder
1. tsconfig.spec.json  - This is typescript config file for our unit testing.
2. tsconfig.app.json   - This is typescript config file for our code. This extends from tsconfig.json
                                       from parent folder.
3. typing.ts                 - TypeDefinition files for node.When I created a project using cli on 4/18/2019
                                       I didn't get this file
4. test.ts                      - This file is required by karma.conf.js and loads recursively all the .spec and
                                      framework files
5. polfills.ts                -  Gives the browser compatibility libraries.
6. index.html             -  This is our main file which will be loaded on application start.this is
                                       configured in webpack
7. main.ts                   -  This is the entry point for angular app to start.This is configures in webpack
8. favicon                   -  Icon  in the title of website
9. style.css                  - To implement any style across the app
10.browerlist             - List of browsers
11. environments      - Specify which app is building 



Angular Modules:

1. platformBrowserDynamic().bootstrapModule- This will load the root module




1. app.module.ts  - This is our root module,which will be loaded when app starts.

attribute/decorator/annotations :
Decorator : It adds extra functionality to your class

    @NgModule  is an annotation for a class. NgModule configure the injector and the compiler and help organize related things together and it has following properties
        Properties:
           1. declarations  - It is an array and should be used to register component/directives and pipes.
           2. imports          - It is used to register the third party libraries or angular libraries or other
                                         custom modules created in our project. Make sure BrowseModule is
                                         imported and never remove this. It should be imported only once and that
                                         should be in root module.
          3. providers        - It is used to register the services.
          4. bootstrap         - It is used to register the root/main component for our application.

2. App Component

What is Component
 It is a dynamic html tag, which can be used anywhere in our application. So we can reuse the HTML.

What does Component  contains
  1. It will have a view : app.component.html is our view
  2. It will have its metadata: It will have a component class,which will contains properties &
      functions.File is (app.component.ts)

we can create a component using cli command which will create the component directory under <<project>>/src/app. The below command can be given from project level and we can see  the update in app.module.ts, for custom modules how it will be updated when a component is created need to be verified
                     ng generate component <<component name>>
                                   or
                      ng g c <<component name>>

We can also manual create a component but we need to follow all naming conventions and including it to other directory

Best Practice :

Create a directory or folder with the component name and inside the folder create a component



    @Component  is an annotation for a class and it has following properties
         Properties:
          1. selector           -  This is the html tag or attribute or class for the component
          2. templateUrl   -  This will be our view, which will contain the HTML.
          3. template         -  To write inline Html. We can use either templateUrl  or template.
                                          Using ` (tilde)  we  can use for multi line HTML.
          4. styleUrls         -  This is to load css for the component.
          5. styles               -  To define inline css. We can use either styleUrls or styles

selector attribute in Component can be of html tag or attribute or class
selector : 'app-server'  --> html tag --> <app-server></app-server> (This will be widely used selector)
selector : '[app-server]' --> attribute --> <div app-server></div>
selector : '.app-server' --> classname --> <div class="app-server"></div>

    @Input is an annotation for a variable/property in component class to mark it for accepting input
                   from parent component.

    @Output is an annotation for a variable/property in component class to mark for sending data
                      from child component to parent component

    @ViewChild is an annotation to control child component in parent component ts file.If we use
                             Viewchild then Input and Output will not be required. Disadvantage is we will be
                             making Parent and Child component tightly coupled.

    @ViewChildren is an annotation to control multiple child components which are similar in parent
                                component.

    @Injectable is an annotation for a class and specifies the class is service type

component file --> component.spec.ts is used for unit testing 

Application Flow:

1. Index.html get loaded , and main.ts loads the root component.
2. Root module has a root component, which is available via bootstrap property.
3. The component which is mentioned in bootstrap property will be our entry component.

How to create a component:
1. run "ng g component <componentName>" g stands for generate


We can have n number of modules in our angular application

Template Engine:
1. Angular has its own template
2. The html we write is not plain HTML, they are angular template

Data Binding:

OneWay Binding:
By default Angular has one way data binding.

String interpolation  

         We can display any property using {{<variable>}} which is called as String interpolation syntax. We can also call a method which is return type of string or the return type must be able to convert to string.

     To print a text on the html template use the string interpolation.

Property Binding

1. We use valid property of HTML to bind the data.
2. We use [] "Box" syntax to achieve the property Binding.

Eg :
<button [disabled]="allowServer"></button> --> this is will be good to use property binding
<div [innerText]="empName"> </div> --> this will be good if we use string interpolation . We can use property Binding as well but good if we go with string interpolation as we are displaying the text.

Don't mix property Binding with String interpolation


Event Binding : (React to User Events)
1. For event binding  we have to use () "Banana" syntax

<button type="button" (click)="toggle()">Toggle</button>

$event is a reserved word to give the data of the event

Two way Binding
Combination of Both is Two-way-Binding

[(ngModel)]="data"

For Two-Way-Binding to work, we need to enable the ngModel  directive. This is done by adding the FormsModule  to the imports[]  array in the AppModule.
You then also need to add the import from @angular/forms  in the app.module.ts file:

import { FormsModule } from '@angular/forms';

Templatevariable 

  To represent a html element we can use template variable and we can have multiple templatevariable for the same input element . The templatevariable name should be unqiue between two input elements.

<input type="text" #inputText> 
the inputText will be behaving as Template variable and will hold 

Events in Angular

(input) --> like keypress we can use it

(click)  --> Click event 

Data Binding :

Transfer data from Component's Class to HTML template 

{{}}	String Interpolation	Class => HTML Template
[]	Property Binding	Class => HTML Template
()	Event Binding	Class <= HTML template
[()]	2-way Binding	Class ó HTML Template
#	Template Variable	HTML template only

Pipe/Filter in angular

Inbuilt Pipe
     UpperCase | LowerCase | Currency | Date | Percentage | TitleCase

Custom Pipe
    Any Logic with pipe & pipetransform

Custom pipe can be created by angular cli

ng generate pipe <<pipename>> or
ng g p <<pipename>>

We can also create custom pipe manually but we need to make sure it is updated in all locations

    @Pipe is an annotation/decorator for a class and it has following properties
       name :  Name of the custom pipe to be used in our code

We can use multiple pipes but we need to make sure the data is passed correctly

Directive is a component without a template which defines custom behavior . 

Decorator kind of defines component ,directives etc.

What are Directives?
Directives are instructions in the DOM

Built-in Directives :
  1. *ngIf           -- To remove/Add the DOM element on some action .
  2. *ngFor        -- Will be used when we have list of records to bind.
  3.   ngSwitch  -- This is similar to Switch-case statement , can be useful when we
                             are using same view to display data based on roles
 4.    ngClass     -- Used to apply the css classes based on action or business rules.
 5.    ngStyle    - To apply style for an html element


For ngIf if we what to have else then mention the template variable name and make sure the template variable is associated to ng-template not to html elements, if we associate the template variable to ng-template then if condition is not met the elements are not loaded in DOM. (Edureka session on 10/4/2020 session 4)

bootstrap css to include in index.html


Component Interaction

What is Component interaction
1. The way to share data between multiple components.
2. We need to have parent and child relationship between components.
3.

Why to use component interaction
1. We can share data between multiple components

How to achieve component interaction
1. @Input() - Will be used to send data to child component.
      a. Create a property in child component, should have same datatype which we want to send from
           Parent.
       b. Pass the data using property binding.

2. @Output() - Will be used to send data from child to parent components
    a. Define an EventEmitter using the @Output
    b. Use event binding to handle the event in parent component.
    c. Multiple events can also be returned.
    d.Data transfers from left to right during the assignment in parent component.


ViewChild:
   1. In case we want full control over child component then use viewchild annotation.
   2. Disadvantage is viewchild creates tight coupling.

ViewChildren
  1. In case we have multiple components placed on our html of same type, and we want to control
       all of them in ts file.


Life Cycle (https://ultimatecourses.com/blog/exploring-angular-lifecycle-hooks-ondestroy)
1. constructor         - Should be used to initialize the component
2. ngOnInit             - This is life cycle event where we can do some binding on load.

                                To implement this we need to import OnInit from core
                                      and need to implements the interface OnInit in typescript class

3. ngOnChanges     - It gets called before the ngonInit in child and after any changes are made to the
                                    input property.

                                    To implement this we need to import OnChanges from core
                                    and need to implements the interface OnChanges in typescript class

4. ngDoCheck         - It will run after Init and after any event (like click of button, checkbox) is
                                   fired.Never implement ngOnchanges and ngDoCheck both in a single
                                   component.
5. ngAfterViewInit - To get access to all ViewChildrens, use this event,it will make sure that
                                    instance all children component is available
6. ngOnDestroy      -  This method is useful to release some resources and we can also handle
                                     some business rules, like showing popup in case user has a incomplete form.

                                     To implement this we need to import OnDestroy from core
                                     and need to implements the interface OnDestroy in typescript class

7. ngAfterContentinit
8. ngAfterContentChecked
9. ngAfterViewChecked


Service or Dependency Injection

Why to use Service:
 1. Reusable code.
 2. Business rules are at common place.
 3. Can be used to share some data across application.
 4. We can achieve loosely coupled system.

How to create a service:
  1. run the command  " ng g service <<servicename>>"

Injectable() : Its is a decorator or annotation, which tells angular the class is a service.

1. Create a service and implement all methods
2. Register our service using providers property
3. To inject a service , use the constructor to inject a service.

4. Services in angular are always singleton global Object available in a module(usually root)

DI : (Dependency Injection)
1. We should never create an instance directly in our class.
2. Most widely used and one of the most important design pattern.
3. In angular we will achieve the DI by constructor injection but in other languages when can do in different ways.

Singleton:
1. Only one instance of our class gets created.
2. To make a service singleton, Register it in root module.


Class Base Services:

1. Services with class

providers : [{provide:StudentService, useClass: StudentService}] //use this syntax to Register a service


Non-Class Base Services:

1. valueProvider     - httpClient
2. factoryProvider  - Routing


Forms
Forms are like necessary part of any application
<form> tag will be used to create a form

Dashboard applications may or may not have forms.

Type of Forms : 
      a. Template driven
      b. Reactive Forms

How to use template driven forms:
  1. import { FormsModule } from '@angular/forms';
  2. add FormsModule to import array.

We can achieve two way data binding using ngModel.
In 2 way data binding values will be reflected on View and Controller as well.

Validation:
    1. Create a instance of form tag
       Eg: <form #customerForm="ngForm" (submit)="addStudent()">


ngform has properties like

invalid   - Validation is not yet met for the field which are present in the form
valid      - All field in the form have data
pristine  - The page is similar when it was loaded and the state where we navigate from the
                 page
dirty       - The page has difference from the initial state and when we navigate from the page
value      - Displays the values of the form
 

Why to use Reactive Forms:
  1. We have a complex form where we want to add control dynamically.
  2. we want to keep control in TS file.

How to use Reactive forms:
  1. import ReactiveFormModule and add in imports array
  2. import FormGroup and declare a variable of FormGroup type, which will be our form
  3. import FormBuilder service, which will help us to create/add controls
  4. import FormControl to add control to the form
  5. in case we want array we will use FormArray

in HTML tags to remember
   1. formGroup
   2. formGroupName
   3. formArrayName
   4. formControlName

Validation
  Validator