angular Notes.txt

Angular installation
====================
1. download Nodejs and install 
   https://nodejs.org/en/download/

2. check nodejs is installed 
   node -v (in command prompt)

3. check if NPM is installed (NPM-Node Package Manager)
   npm -v 

4. install angular CLI (Command Line Interface)
   npm install -g @angular/cli
		OR
   npm install -g @angular/cli@latest
		OR
   npm install -g @angular/cli@17

5. check if angular CLI  is installed??
   ng v  
   npx ng v
   ng help

6. create a new angular project (go to the folder where project needs to be created)
   ng new project1 (project1 - name of the project, can be any other valid name)
   ng new your-angular-project --defaults
   
   you will be prompted for few things, just select 'yes' (enter)
   1. CSS/SCSS/LESS - select css

7. Run the project / Start the project
   in command prompt go to the project directory (ex: c:/users/sanjay/angular/project1)
   Run the Below command 
   ng serve 
	  (OR)
   ng serve --open 
	  (OR)
   ng s -o  (step-8 is not required)
-ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.
   
8. open your browser and open the below URL   
    http://localhost:4200
  

-To Run the project in other port
	ng serve --port 5000 --open


npx @angular/cli new angular-internationalization-example --style=css --routing=false --skip-tests



vscode extensions
=================
1. ESLint
2. prettier
3. code spell checker
4. gitlens
5. vscode-icons
6. thunderclient


Chrome Extensions
=================
1. Mobile Simulator
2. Angular DevTools
3. Redux DevTools
4. JsOn Viewer



Angular
=======
-Angular is a platform and framework for building single-page client applications using HTML and TypeScript.
-A framework is a set of helper functions,tools and rules that help us to build our application.
-Angular is a collection of well-integrated libraries that cover a wide variety of features including routing,forms management, client-server communication, and more
-Angular is a suite of developer tools to help us develop, build, test, and update our code. (Angular CLI)



	Framework										Library
=========================================================================
-group of libraries to make our work easier		-performs specific  operations
-provides ready to use tools,standards			-provides reusable functions for our code
 templates for fast application development
-Collection of libraries & APIs					-collection of helper functions,objects
-cann't be easily replaceable 					-can be easily replaceable 
-angular,vue									-jQuery,lodash,momentjs,ReactJs
-Hospital with full of doctors					-A doctor specialized in 1 thing		



		React						Angular
===========================================================
1. Library-2013					 1. Framework-2009
2. Light-weight					 2. Heavy
3. JSX + Javascript				 3. HTML + Typescript
4. Uni-Directional				 4. two-way
5. Virtual DOM					 5. Regular DOM
6. Axios 				 		 6. HttpClientModule 
7. No 		 					 7. Dependency Injection
8. No							 8. Form Validation
9. extra libraries needed		 9. No additional libraries
10. UI heavy					 10. Functionality heavy



Bootstrapping angular Application
=================================
-Bootstrapping is a technique of initializing/loading our Angular application.

1. index.html --> <app-root></app-root> (component)
2. main.ts   --> bootstrapApplication(AppComponent, appConfig)
3. app.config.ts --> configuration information about our application (Application level route info)
4. app.component.ts-->app.component.html-->app.component.css

steps to bootstrap the application:
1. Load index.html
2. Load Angular, Other Libraries, and Application Code
3. Execute main.ts File
4. Load Application-Level Module
5. Load Application-Level Component
6. Process Template


Modules
=======
-Module in Angular refers to a place where we can group the components, directives, pipes, and services, which are related to the application.
-Modules are used in Angular to put logical boundaries in your application. instead of coding everything into one application, we can instead build everything into separate modules to separate the functionality of your application.
-In case we are developing a website, the header, footer, left, center and the right section become part of a module.
-Every application should have at least one Angular module, the root/app module, which must be present for bootstrapping the application on launch.


important properties of module are:
----------------------------------
-declarations: The set of components, directives, and pipes that belong to this module
-exports: set of components, directives, and pipes declared in this NgModule that should be visible and usable in the component templates of other NgModules.
-imports: Other modules whose exported classes are needed by component templates declared in this NgModule.
-providers: The set of injectable objects that are available in the injector of this module.
-bootstrap: The main application view, called the root component, which hosts all other app views. Only the root NgModule should set the bootstrap property.
-entryComponents: set of components to compile when this NgModule is defined, so that they can be dynamically loaded into the view
-schemas: Elements and properties that are neither Angular components nor directives must be declared in a schema
-id: A name or path that uniquely identifies this NgModule in getModuleFactory
-jit: When present, this module is ignored by the AOT compiler



Component
=========
-Components are the most basic UI building block of an Angular app. 
-An Angular app contains a tree of Angular components.
-Each component defines a class that contains application data and logic, and is associated with an HTML template that defines a view to be displayed.
-@Component() decorator identifies the class immediately below it as a component, and provides the template and related component-specific metadata.

https://angular.io/api/core/Component#description

@Component configuration options:
--------------------------------
selector:      Ex: 'app-header'
template:      `<div>This is header Component</div>`
templateUrl:   './header.component.html'
style:  	   ['.class1{color:red}']
styleUrl:     ['./header.component.css']
encapsulation: ViewEncapsulation.ShadowDom
providers:     [Services]
changeDetection:ChangeDetectionStrategy.OnPush
viewProviders: []
animations:  []
interpolation: []
entryComponents: []
preserveWhitespaces?: boolean
standalone?: boolean
imports:[]
schemas?:[]



Decorators
==========
@NgModule  - Decorator that marks a class as an NgModule
@Component - Decorator marks a class as an Angular component
@Directive - Decorator marks a class as an Angular Directive
@Injectable - Decorator marks a class as an Angular Service
@Pipe - Decorator marks a class as an Angular Pipe
@Input - collect data from parent component
@Output  - Child component emits event to parent component
@HostBinding - Binds value to the host element  (custom directive)
@HostListener - listens event from the host element (custom directive)
@ViewChild - 
@ViewChildren - 
@ContentChild - 
@ContentChildren - 




Angular CLI
===========
-Angular CLI is a command-line interface tool used to initialize, develop, scaffold, and maintain Angular applications directly from a command shell

ng g c demo --dry-run --flat --skip-tests --inline-template --inline-style

g: Generate
c: Component
--flat : No Sub folder for the component(header/footer)
--skip-tests : No test specification file
--inline-template : No Linked Template
--inline-style : No external CSS file
--dry-run : Will display the update without execution

scaffold	usage
---------   --------
project     ng new <ProjectName>
Component	ng g component my-new-component
Directive	ng g directive my-new-directive
Pipe	    ng g pipe my-new-pipe
Service	    ng g service my-new-service
Class	    ng g class my-new-class
Guard	    ng g guard my-new-guard
Interface	ng g interface my-new-interface
Enum	    ng g enum my-new-enum
interceptor ng g interceptor my-interceptor
Resolver    ng g resolver my-resolver
Module	    ng g module my-new-module

https://angular.io/cli/generate



Angular Project - Folder Structure
==================================
.editorconfig	: Configuration for code editors. See EditorConfig.
.gitignore		: Specifies intentionally untracked files that Git should ignore.
README.md		: Introductory documentation for the application.
angular.json	: CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor. For details, see Angular Workspace Configuration.
package.json	: Configures npm package dependencies that are available to all projects in the workspace. See npm documentation for the specific format and contents of this file.
package-lock.json : 	Provides version information for all packages installed into node_modules by the npm client. See npm documentation for details. If you use the yarn client, this file will be yarn.lock instead.
src/			:  Source files for the root-level application project.
node_modules/	: Provides npm packages to the entire workspace. Workspace-wide node_modules dependencies are visible to all projects.
tsconfig.json	: The base TypeScript configuration for projects in the workspace. All other configuration files inherit from this base file. For more information, see the Configuration inheritance with extends section of the TypeScript documentation.
tslint.json		: Default TSLint configuration for projects in the workspace.



How to Use Bootstrap in Angular 
===============================
-Bootstrap can be used in Angular either by using CDN or by installing.
1. npm install  bootstrap
2. add the below line in 'styles.css'
	@import 'bootstrap/dist/css/bootstrap.css'
3. add 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js' in 'angular.json'     
      projects->architect->build->scripts array



How to Display Images from local folder
=======================================
1. place the images inside 'public' folder
2. use it in HTML file
   <img src='sachin.jpg' />



Databinding
===========
-automatic synchronization of data between Component(TS) and view(HTML).

1.  interpolation  	 {{ }} (1-way)   (component-->view)
2.  property Binding  [ ]  (1-way)   (component-->view)
	bind-property (bind-innerHTML)
3.  Event Binding     ( )  (1-way)   (view-->component)
	(click)   /  on-click
4.  2-way Binding  [(ngModel)] (2-way) (component<-->view)
    bindon-ngModel
    Note:For 2-way bindning "FormsModule" should be imported
	
InterPolation: for concatenating strings;Doesn't work with boolean values
Property: to set an element property to a non-string data value.


2-way Binding:
	1. import FormsModule 
		a. import { FormsModule } from '@angular/forms'
		b. imports: [ FormsModule]
	2. in view file use [(ngModel)]='variable'
		<input type="text" [(ngModel)]='x'>
		
<input type="text" on-keyup="userIdChanged()"	[(ngModel)]="userId" />
			(OR)
<input [(ngModel)]="userId" (ngModelChange)="onUserIdChange($event)" />
onUserIdChange(userId: number): void {
    console.log('Value Changed');
}




Attribute Binding
=================
-Attribute Binding is needed while working with HTML attributes that do not have corresponding DOM properties, such as colspan, aria-* , data-* attributes

-attributes are defined by HTML and properties are defined by the DOM.
-The attribute’s main role is to initializes the DOM properties. once the DOM initialization complete, the
attributes job is done.
-Property values can change, whereas the attribute values don't change.
-Property Reflects real-time state changes, whereas Attribute Doesn't change dynamically after creation.

var value1 = document.getElementById('inputBox1').getAttribute('value');
var value2 = document.getElementById('inputBox1').value;
console.log(value1, value2); // type something in the box & run these again
 
 <button [attr.aria-label]="ariaLabel">Click me</button>
 there is no equivalent DOM property for aria-label


 <table [width]='myWidth' [attr.height]='myHeight'></table>
 <tr><td [attr.colspan]="1 + 1">One-Two</td></tr>   Correct
 <tr><td [colSpan]="1 + 1">One-Two</td></tr>   Correct
 <tr><td [colspan]="1 + 1">One-Two</td></tr>   Wrong
 
Note: 'colspan' is attribute whereAs 'colSpan' is property. 


Variables in templates
======================
-Angular has two types of variable declarations in templates: 
	1. local template variables 
	2. template reference variables.
	
Local template variables with @let
==================================
@let syntax allows to define a local variable and re-use it across a template.
@let cannot be reassigned after declaration
Angular automatically keeps the variable's value up-to-date with the given expression
@let declarations cannot be accessed by parent views or siblings


@let name = user.name;
@let greeting = 'Hello, ' + name;
@let data = data$ | async;
@let pi = 3.1459;
@let coordinates = {x: 50, y: 100};


Template Reference variables
============================
-allows to reference DOM elements present in the template
-access and manipulate DOM elements, child components, or directives
-access in the template without directly accessing them in the TypeScript code.
-They are only accessible within the same template.
-In the template, we use the hash symbol, # or 'ref' to declare a template variable.
 <input #phone placeholder="phone number" />
				OR
 <input ref-phone placeholder="phone number" />			




Assignments: 
1. Have a paragraph & a toggle button, on click of the button control the visibility(Show/Hide) of the paragraph
2. Create a text-area with maxLength=100, as the user keeps typing display updated Remaining characters.
3. Create dropdown with state names, when user changes dropdown value, print the selected dropdown value in a paragraph
4. have 2 inputBoxes, and a dropdown(+,-,*,/) and perform arithmetic operations
5. create a input box, toggle the type of that input box to (text/password)
6. create a counter example with 3 controls(increment,decrement,reset)
7. Have a toggle button and control Dark/Light theme of a page.


	
CSS
****
1. inline
2. internal
3. styles[] in component
   styles: ['h1 { color:red; }']
4. styleUrl / styleUrls in component
5. styles.css global

Note:- the styles written in component's css file applies only to one component. 
      They are not inherited by any components nested within the template nor by any content projected into the component



View Encapsulation
******************
View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. 

Angular provides below encapsulation strategies:
1. Emulated (default) - styles from main HTML(index.html) propagates to the component. 
					Styles defined in component are scoped to that component only.

2. None - styles from the component propagate back to the main HTML and therefore are   visible to all components on the page. 
Be careful with apps that have None components in the application. 
 
3. shadowDOM - Use shadowDOM for style encapsulation (only component css will be applied)
			   1. CSS won't come from main HTML to Component.
			   2. css will be provided from parent to child component.

ex:- encapsulation: ViewEncapsulation.Emulated(default) 
	 encapsulation: ViewEncapsulation.ShadowDom
	 encapsulation: ViewEncapsulation.None
	 

Emulated: index HTML--->parent Component (yes)
		  index HTML-->child component (yes)
		  Parent(Emulated) --> child(Emulated) (No)
ShadowDom: index HTML--->parent Component(shadowDOM) (No)
		   index HTML-->child component (No)
		   Parent (shadowDOM) --> child(Emulated) (Yes)		   
		   Parent (shadowDOM) --> child(ShadowDom) (No)		   
None: index<--->parent Component(None)<-->child component
	 




Directives
**********
-Directives Enhance the power of HTML elements.
-Directives add additional behavior to elements in Angular applications.
-Before Angular 17  (*ngIf , *ngSwitchCase, *ngFor)
-After angular-17  (@if , @else , @switch , @case , @default , @for, @let)

1. Structural Directives : 
	Directive which changes the layout/structure of the DOM.
	* is used with structural directives.
	only 1 structural directive can be applied to an element.	

2. Attribute Directives : ([ngStyle],[ngClass])
	Directive which changes behaviour/appearance of the DOM element.
	[ ] is used with attribute direcives.
	many attribute directives can be applied to an element.

Note : Compononent can also be considered as directive, because it powers up the html by creating Custom Element, but the directives cannot be considered as component because it does not have a View (template and templateUrl cannot be used in directives)



@if(!flag){
	<h1>truuuuuuuuuuuuu</h1>
}@else{
	<h1>Falseeeeeeeeeeeeeeeeeeeee</h1>
}


@if() vs hidden
===============
-when @if() condition is false, the element will neither be displayed on the page/screen nor it will be there in the DOM.
-when [hidden] condition is true, the element will not be displayed on the page/screen(display:none) but it will be there in the DOM.



Switch Case
===========
@switch (n) {
    @case (1) { <h1>Monday</h1> }
    @case (2) { <h1>Tuesday</h1> }
    @case (3) { <h1>Wednesday</h1> }
    @case (4) { <h1>Thursday</h1> }
    @case (5) { <h1>Friday</h1> }
    @case (6) { <h1>Saturday</h1> }
    @case (7) { <h1>Sunday</h1> }
    @default { <h1>Not a Valid number</h1>> }
}



@for()
======
1. for with array , @for with @empty
	@for(car of cars;track car;let i = $index){
	  <h4>{{car}}----{{i}}</h4>
	} @empty {
	  Empty list of cars
	}
2. @for() with String
   @for(char of str;track char){
		<div>{{char}}</div>
   }
 
3. @for with Iterable objects (Map)
   @for (entry of myMap; track entry){
       <div>{{entry[0]}} === {{entry[1]}}</div>
	}
4. @for() with index
	@for (item of items; track item; let index = $index) {
		<li>{{ index }}: {{ item }}</li>
    }
   

-Before Angular 17 (index,first,last,even,odd)
-After Angular 17 ($index,$first,$last,$even,$odd,$count)


ngFor trackBy
-------------
-trackBy is required. It is used to optimize performance by preventing unnecessary change detection runs when the data changes.

-ngFor by default tracks list items using object identity. This means that if you build a list of new objects from scratch with the exact same values as the previous list and pass this newly built list to ngFor, Angular will not be able to tell that a given list item is already present or not.

-NgForOf needs to uniquely identify items in the iterable to correctly perform DOM updates when items in the iterable are reordered, new items are added, or existing items are removed.
-In all of these scenarios it is usually desirable to only update the DOM elements associated with the items affected by the change. This behavior is important to:




Migrate/convert from old syntax to new syntax
=============================================
ng generate @angular/core:control-flow



Assignment:
==========
-Declare an array of users, display users in card & table format. 
 add a button/switch to toggle between table view and card view.
https://jsonplaceholder.typicode.com/users



ngStyle
=======
-ngStyle is used to apply some style conditionally.

<p [style.color]="num % 2 == 0 ? 'blue' : 'red'"> Add a style </p>
<p [style.fontSize.px]='48'> Add style with unit </p>
<p [style.background-color]=" flag?'green':'blue' "> Add style conditionally </p>
<p [ngStyle]="condition ? myStyle1 : myStyle2"> NgStyle for multiple values </p>
<p [ngStyle]="myFunction()"> NgStyle for multiple values </p>



ngClass
=======
-ngClass is used to apply css classes conditionally

-Add/Remove Single Class : 
	<div [ngClass]="{'active': isActive}">
	<div [class.active]="isActive">
-Multiple Conditional Classes : 
	<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">
-Array of Classes: 
	<div [ngClass]="['class1', 'class2', isActive ? 'active' : 'inactive']">
-Combining Object and Array : 
	<div [ngClass]="['common-class', { 'active': isActive, 'disabled': isDisabled }]">

<p [class.myClass]='flag'> Add a class to an element </p>
<p [ngClass]="myClasses"> Add Multiple classes to an element </p>
<p [ngClass]="myFunction()"> Add Multiple classes to an element </p>
<button class="btn" [ngClass]="flag ? 'btn-success' : 'btn-danger'">
	Class Binding example
</button>




ng-template , ng-container
==========================
-<ng-template> directive represents an Angular template.
-content of this <ng-template> will contain part of a template, that can be composed together with other templates in order to form the final component template. 
-Angular is already using <ng-template> under the hood in many of the structural directives that we use all the time: ngIf, ngFor and ngSwitch
 
-Angular <ng-container> is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.
-if we need a helper element for nested structural directives.<ng-container> can be used instead of creating an un-nscessary element(<div>).



ng-content/ Content projection
==============================
-used to create configurable components.
-Components that are used in published libraries make use of <ng-content> to make themselves configurable.
-if We want to insert HTML elements or other components in a component, then We do that using the concept of content projection. 
-We achieve content projection using <ng-content></ng-content>
https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/


child
======
<ng-content></ng-content>
<ng-content select="#div1"></ng-content>
<ng-content select=".div2"></ng-content>
<ng-content select="span"></ng-content>

parent
======
<h1 id="div1">Registration Form</h1>



Read data from a JSON file 
==========================
1. create a JSON file (employees.json/products.json/users.json)
   [ {},{},{} ]
2. in tsconfig.json add the below option  under 'compilerOptions'
    "resolveJsonModule": true,
3. import the data & use in component file (products.component.ts)
   import * as data from './products.json';
   
   myProducts = (data as any).default;  // inside the class
   
4. use 'myProducts' in HTML file
   <div *ngFor="let prod of myProducts"> </div>


How to use font-awesome (https://fontawesome.com/v4/icons/)
=======================
1. ng add @fortawesome/angular-fontawesome
			(OR)
   npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

2. import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   import { faStar } from '@fortawesome/free-solid-svg-icons';
   imports: [FontAwesomeModule]
3. <fa-icon [icon]="faStar"></fa-icon>



ngxPagination
=============
1. install ngxpagination module
   npm install ngx-pagination 

2. add ngxpaginationModule to our component
   import {NgxPaginationModule} from 'ngx-pagination';
   imports: [ NgxPaginationModule,CommonModule]
   
3. use the below code in html
	 @for(user of users | paginate: { itemsPerPage: 4, currentPage: p};track $index){
	 }
    <pagination-controls (pageChange)="p = $event"></pagination-controls>



Assignment:
-Read data from a static array and display list of products
  https://fakestoreapi.com/products
-implement pagination
-implement search functionality (Search By Title)
-implement sort functionality (Price Asc, Price desc)



How to use SweetAlert (https://sweetalert2.github.io/)
=====================	
1. npm i sweetalert2	
2. import sweet-Alert in your component
   import Swal from 'sweetalert2'	
3. on button click call a function, which has the below code	
   Swal.fire('Good job!', 'You clicked the button!', 'success');


How to use snackbar	
===================
1. npm i awesome-snackbar
2. import Snackbar from 'awesome-snackbar'
3. new Snackbar('Helloooo, Good Morning', { position: 'top-center', theme: 'light', timeout: 2000 });

https://snackbar.awesome-components.com/
https://www.npmjs.com/package/ngx-toastr



Assignment
----------
1. create 1 EmployeeCRUD component
2. display list of employees in a table(data comes from an array)
3. user should be able to delete Employee (ask user confirmation)
4. view the details of each employee in a modal (bootstrap Modal)
5. add a new employee to the table (insert a new record to the array)
   use sweetAlert to display messages ('Added Successfully')




Custom Directives
=================
-Create custom directives to attach custom behavior to elements in the DOM.
-@Directive decorator is used to create a custom Directive.
-directives won't have templates, whereas components have templates.

-@HostBinding  -  when a directive wants to Set any property on the host element.
-@HostListener  - when a directive wants to listen events from the host element.


Component vs Directive
----------------------
-Component has View/Template  where as Directives won't have View/Template.
-Components are used to create UI widgets , Directives are used to add behavior to an existing DOM element.


Custom Directive Assignment
============================
1. create a custom directive (zoomout) which scales the element by 150%.


	
Angular Pipes
=============
-transform strings, currency amounts, dates, and other data for display.
-Pipes are used in template expressions to accept an input value and return a transformed value.
 ex: {{ 5000 | currency }}    output: $5,000.00
            (OR)
<div [innerHTML]='name | lowercase'></div>
-To apply a pipe, use the pipe operator (|)  as shown in the above example.

-Angular provides built-in pipes,The following are commonly used built-in pipes for data formatting.
1.lowercase
2.uppercase
3.titlecase
4.currency
5.date
6.number
7.percent	
8.json 
9.keyvalue - Iterate Object
10.slice
11.async(Observable)


curreny
-------                  
{{ 5000 | currency}}
{{ 5000 | currency : 'USD' }} 
{{ 5000 | currency : 'INR' }}
{{mySal | currency : '&euro;'}}
  input | pipeName : arguement
  
Date
-----
<h5>{{today | date : 'shortDate'}}</h5>
<h5>{{today | date : 'mediumDate'}}</h5>
<h5>{{today | date : 'longDate'}}</h5>
<h5>{{today | date : 'fullDate'}}</h5>

<h4>{{ today | date: "fullTime":"UTC" }}</h4>


decimal/number
-------------
<h4>{{ 12.111222333 | number: "3.2-5" }}</h4>     
012.11122

<h4>{{ 12.1 | number: "3.2-5" }}</h4>
o/p:- 012.10

<p>{{0.5 | number:'3.2-5'}} </p> 
o/p:- 000.50 

Use format '3.2-5' : 
minIntegerDigits = 3 
minFractionDigits = 2 
maxFractionDigits = 5 

Percent Pipe
-------------
{{ 2.5 | percent}}  o/p- 250%
{{ 2.5 | percent:'2.2-5'}}  o/p- 250.00%
{{0.024 | percent}}


keyvalue
--------
@for(entry of user | keyvalue;track $index){
   <h5>{{entry.key}}---{{entry.value}}</h5>
}


slice pipe
-----------
-slice pipe can be used with array and string
<h4>{{cars | slice : 2 : 4}}</h4>
<h4>{{myName | slice : 2 : 4}}</h4>
<h4>{{myName | slice : 2 : -1}}</h4>


Custom Pipe
===========
1. ng generate pipe remaining
2. every angular pipe implements PipeTransform Interface
  class RemainingPipe implements PipeTransform {
  }
3. override transform()
   transform(input: any, maxLength = 100) {
       return maxLength - input.length;
   }
   

Assignment
==========
1. Create a custom pipe(ordinal) which takes a number as input and returns in ordinal format
   input : 21,22,23,24  output : 21st, 22nd , 23rd, 24th
2. create a custom pipe(Roman) which takes a number as input and returns its equivalent roman value
   input :  4     
   output : IV  
3. create a custom pipe called 'age' which takes a date as input and returns the age in years.
   input : 04-06-2020
   output : 4 years old
4. declare an array of employee objects. display them in a table.
   create a custom pipe Salutation that will add 'mr. / miss.' before the employee name.
5. declare an array of employee objects. display them in a table. 
   add a search-box above the table. create a custom-pipe to filter/search employees data.

   
   
Pure & Impure Pipe
------------------
-By Default every custom pipe we create is pure pipe.

-A pure pipe's transform() is only called when Angular detects a change in the value or the parameters passed to a pipe.

-An impure pipe's transform() is called for every change detection cycle
 no matter whether the value or parameters change.transform() gets called if any variable in the page chages.
 
-If the pipe has internal state (result depends on state other than its arguments), set pure to false. 
In this case, the pipe is invoked on each change-detection cycle, even if the arguments have not changed.
 
-to make a pipe impure
  @Pipe({
		name : 'account',
		pure : false
	})

	
Use pipes in component file
---------------------------
1. import pipe class to the component	
   import { UpperCasePipe } from '@angular/common'
   
2. register that pipe service in component
    providers: [UpperCasePipe]
	
3. inject that service to the component
   constructor(private upperCasePipeObj: UpperCasePipe)
   
4. use the pipe using transform()
   this.b = this.upperCasePipeObj.transform(this.a);
	

Use custom pipes in component file
----------------------------------
1. import pipe class to the component	
   import { RemainingPipe } from 'src/app/custom-pipes/remaining.pipe';
   
2. create an instance of that pipe and call transform() with that instance
   const pipeObj = new RemainingPipe();
   const remainingChar = pipeObj.transform('hello', 100);
   console.log(remainingChar);

	


Component Communication
=======================
parent -->  Child    
	property Binding []  
	@input() / inputs:[]
	
child -->  parent   
	event Binding ()
	@output  / outputs:[]
	
Sibling -->  child1--> parent -->child2
			 


Q.How can we share data between 2 components (Unrelated Components)
  1. services
  2. Subject / BehaviourSubject
  
  
Props Drilling
==============
-Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level.
-Solution : State management Library (NgRX)


inputs:['title']
set title(){
	// setter for title input variable
	// this function gets invoked when a new value is assigned to 'title'
}
  
  
  
Child to parent
===============
1. create an EventEmitter Object and emit that event with the data in child component
   import { Component, EventEmitter, OnInit } from '@angular/core';
   myEvent = new EventEmitter();
   sendDataToParent() {
    this.myEvent.emit(this.product);
   }
2. add that event information in outputs:[] of child component
   outputs:['myEvent']
3. add event listener in parent's HTML & TS
   <app-child2 (myEvent)="getDataFromChild($event)"></app-child2>
   getDataFromChild(data:any){
      this.product = data;
   }

  


component lifecycle hooks/method 
================================
constructor - ngOnChanges - ngOnInit  - ngDoCheck - ngAfterContentInit - 
ngAfterContentChecked - ngAfterViewInit - ngAfterViewChecked - ngOnDestroy. (1+8)

afterNextRender(() => {
});

 
3 steps to use lifecycle hooks, they are:
========================================
1. Import Hook interfaces from '@angular/core' library
   ex:- import {onChanges} from '@angular/core'

2. Declare that component/directive and implement lifecycle hook interface
   ex: class ChildComponent implements onChanges
		{
		}
3. write the hook method and define the functionality of that method.
		ex: class ChildComponent implements onChange
		{
			ngOnChanges()
			{
				//logic
			}
		}	
ex- ngOnChanges() is a method from 'OnChanges' interface


The hooks/lifecycle methods are executed in this order:
--------------------------------------------------------
constructor()
-This is invoked when Angular creates a component or directive by calling new on the class.
-Initialize class variables,dependency Injection.
-No Business Logic should be written in constructor.

ngOnChanges()
-ngOnchanges() will not be invoked if the component doesn't have inputs:[]
-Invoked every time there is a change in one of the input properties of the component.
-inside ngOnchanges() we can access previous and current value of a variable.


ngOnInit()
-Invoked for every component when a component gets Initialized.
-This hook is called only once, after the first ngOnChanges.not after every ngOnchanges()
-Time Consuming Logic goes here. Ex:- API Call


ngDoCheck()
-Invoked when the change detector of the given component is invoked. 
-It allows us to implement our own change detection algorithm for the given component.
-useful to detect and act upon the changes that can not be detected by Angular on its own.
-Due to default behavior of angular change detection, ngOnChanges can't detect if someone changes a property of an object or push an item into array ??. So ngDoCheck comes to recuse.
-Detect deep changes like a property change in object or item is pushed into array even without reference change.
-By using ngDoCheck and KeyValueDiffer, you can monitor changes in complex objects that might not be caught by Angular's default change detection mechanism.


ngAfterContentInit()
-Invoked after Angular performs any content projection into the components view 
-Runs only once after the first ngDoCheck()
-Use ngAfterContentInit to call something once after all of the content has been initialized


ngAfterContentChecked() 
-Invoked each time the content of the given component has been checked by the change detection mechanism of Angular.
-is called after ngAfterContentInit for the first time.
-is called after every subsequent ngDoCheck


ngAfterViewInit() 
-Invoked when the component’s view has been fully initialized.
-this is the best place for DOM manipulation.
-is called once after ngAfterContentChecked.
-ngAfterViewInit() is called after all child components are initialized and checked.


ngAfterViewChecked() 
-is called after every subsequent ngAfterContentChecked.
 
 
ngOnDestroy()
-This method is invoked just before Angular destroys the component.
-Clean up code.  ex:- clearInterval(),clearTimeout(); unsubscribe();


N.p-ngDoCheck and ngOnChanges should not be implemented together on the same component



Angular Change Detection Strategies
====================================
there are 2 change detection strategies: 
		1. default  (CheckAlways)
		2. onpush   (CheckOnce)
		
Default:
-------
-Angular runs change detection on all components when any asynchronous events occur.
-user events, HTTP requests, timers

OnPush
------
-The OnPush strategy can significantly improve performance by reducing the frequency of change detection runs
- It tells Angular to run change detection for the component only when
	An @Input property changes due to a reference change.
	An event originated from the component or one of its children.
	You manually trigger change detection.
		
Benefits of OnPush Change Detection:
Performance: Reduces the number of change detection cycles, especially beneficial for large applications with many components.
Predictability: Changes are only detected when input references change or when an event originates from the component, making the component behavior more predictable.





Renderer2
=========
Renderer2 is a service provided by Angular that allows you to interact with the DOM in a platform-agnostic and safe way. It is often used to:
	a. Create or modify DOM elements.
	b. Add or remove attributes, classes, or styles.
	c. Handle events.
	

@ViewChild & @viewChildren
==========================
-@ViewChild decorator is used to query a single DOM element from the DOM tree and manipulate it.
	1. To get access to a child component from parent component class. or vice-versa
	2. To get access to the DOM elements
-@ViewChildren decorator returns the list of different native DOM elements in the form of QueryList, which contains the set of elements.
-if we want to access multiple child references, then we have to use @ViewChildren.





Programmatically rendering components
======================================
-There are two main ways to dynamically render a component: 
	1. in Template File : NgComponentOutlet
	2. in TypeScript : ViewContainerRef	
https://angular.dev/guide/components/programmatic-rendering



	

Angular Services
****************
- share logic/data across components.
- code Reusability
	(write once use that in multiple components)
- Lazily instantiated
	(Angular only instantiates a service when a component depends on it)
- Singletons
	(Each component dependent on a service gets a reference to the single instance generated by the service factory.only one instance of the service gets created through-out the application)

-create a service using angular CLI
 ng generate service myService
		


steps to create and use service
--------------------------------
1. create a service (ng g s service-name)
	a. write a class with set of methods and properties.
	b. decorate that class with @injectable decorator
	 
2. use a service in component
   a. import service to component file
   b. create a referrence variable for that service(inside constructor) / Dependency Injection
   c. using the referrence variale make use of methos and properties from service
   
	class MathComponent{
		constructor(private mathObj : MathService){
			
		}
	}
			(OR)
	class MathComponent{
		constructor(){
			this.mathObj = inject(MathService);
		}
	}
 
 
Dependency injection 
=====================
-Dependency injection (DI), is an application design pattern. 
-In Angular, the Dependency Injection framework provides declared dependencies to a class when that class is instantiated.   

constructor(private myHttp:HttpClient){}
	OR
constructor(){
	 this.myhttp = inject(HttpClient);
}



Assignment
==========
1. create an EmployeeService with an array of employees
2. inject that service in EmployeeComponent
3. Display List of Employees in a table / Card
   have a dropdown with 3 values- allEmployees , maleEmployees , femaleEmployees
   based on the dropdown value selected, employee data should be shown




ViewContainerRef.createComponent()
==================================
-to load components dynamically rather than declaring them statically in the template.
-useful when the component to be displayed depends on some user interaction, configuration, or data that isn't known at compile time.
-It eliminates the need for the ComponentFactoryResolver







Types of Provider 
======================
The Angular Dependency Injection provides several types of providers.

1. Class Provider : useClass
   providers :[{ provide: ProductService, useClass: ProductService }]
2. Value Provider: useValue
  providers :[ {provide:'USE_FAKE', useValue: true}]
  constructor(
    @Inject('USE_FAKE') public useFake: string
  ) {}
3. Factory Provider: useFactory


Aliased Class Provider: useExisting

  
https://docs.angular.lat/guide/dependency-injection-providers




  
Communicating with backend services using HTTP
==============================================
-frontEnd applications need to communicate with a server to Fetch or Send data.
-Using HttpClient an angular application can communicate with server.


HTTP Methods
============
GET - Retrieve a resource/Retrieve data from DB
	  search
	  
POST - to send data to server  ( sign up ) 
	   create a resource/create a new record in DB
	   to fetch data securly    (send params in body not in URL)

PUT - update data/create or replace a resource  
	    
PATCH - update/modify a resource
		update password/update mobile number 

DELETE - remove a resource/delete a record from DB 
		 Delete naukri account
		 

PUT vs POST
-----------
-PUT for UPDATE operations, POST for CREATE operations.
-PUT is idempotent, where POST is non-idempotent.
-Idempotence(producing the same result even if the same request is made multiple times)
-(PUT)if you retry a request N times, that should be equivalent to single request modification.
-(POST)if you retry the request N times, you will end up having N resources with N different URIs created on server.
-Use PUT when you want to modify a singular resource which is already a part of resources collection.
-Use POST when you want to add a child resource under resources collection.


Idempotent
----------
-It ensures that multiple identical requests will have similar response no matter how many times they get called.



PUT vs PATCH
------------
-PUT is used to replace an existing resource.
-PATCH is used to apply partial modifications to a resource.

		 
http status codes
=================
1xx Informational  (100-Continue,101-switching Protocols,102-processing)
2xx Success		   (200-OK,201-created,202-accepted,204-No Content)
3xx Redirection	   (300-Multiple Choices,301-Moved Permanently,302-Found,304-Not Modified)
4xx Client Error   (400-Bad Request,401-Unauthorized,403-Forbidden,404-Not Found)
5xx Server Error   (500-Internal Server Error,502-Bad Gateway,503-Service Unavailable)



POSTMAN
=======
-application / Chrome extension used to Test REST APIs.
 https://www.postman.com/downloads/


Fake Online REST API for Testing 
1. https://jsonplaceholder.typicode.com/users
2. https://reqres.in/
3. https://fakestoreapi.com/products
4. https://api.github.com/users/google
5. https://dummyjson.com/products
6. https://dummy.restapiexample.com/
7. https://my-json-server.typicode.com/horizon-code-academy/fake-movies-api/movies
8. https://api.publicapis.org/entries
9. https://github.com/geertjanw/ojet-training/blob/master/employeeData.json


Create REST API with json-server
================================
https://medium.com/@devmrin/create-a-rest-api-json-server-in-less-than-1-minute-acf286600f03

1.Install json-server (not necessarily inside angular project, run the below command in cmd)
	npm install -g json-server
2.create a json file with some data(not necessarily inside an angular project)
    employees.json (filename can be anything.json) (copy con employees.json)
3.start json server(go to the folder where json file is present,run the below command in cmd)
   json-server --watch employees.json
   
http://localhost:3000/employees   
GET    /employees
GET    /employees/{id}
POST   /employees
PUT    /employees/{id}
PATCH  /employees/{id}
DELETE /employees/{id}
  



How to use HttpClient 
=====================
1. add provideHttpClient() in app.config.ts
   providers: [
	   provideRouter(routes), 
	   provideHttpClient() // Configures Angular's HttpClient service to be available for injection.
   ]

2. inject HttpClient in custom service / Component
   constructor(private http: HttpClient) { }
   
3. using that referrence variable call httpClient methods(GET,POST,PUT,PATCH,DELETE)
	this.httpClient.get(this.users_url).subscribe(response => {
      console.log(response);
    })   
 



HttpClient vs fetch()
=====================
-fetch() returns Promise , whereas HttpClient returns Observable.
-HttpClient Supports RxJS observable-based APIs.
-data returned by fetch() needs to be converted to JSON using json()
 ex: fetch('url').then(data=>data.json())
     .then(finalData=>console.log(finalData))
-HttpClient comes with built-in CSRF protection , fetch() doesn't
-HttpClient has interceptor to Intercept request and response. fetch() doesn't



Assignment
==========
1. Create 1 user CRUD application using HttpClient
	a. fetch the data and display in a table (json-server)
	b. create a form, collect form data and make a post call to add a new user
	c. add 'delete' button against every user, on click 'delete', delete that user
	d. display 'Loading...' text/Image when data is being fetched
	e. implement update functionality to update the data
	f. write all the logics in a service for code reusability


 
HttpClient with Headers
=======================
-Reading the full response(not only the body)
 httpClient.get(URL)	//  { observe: 'body' } (default)
 httpClient.get(URL , { observe: 'body' })     
 httpClient.get(URL , { observe: 'response' })
 

 

models in Angular
=================
-A Model represents the structure of the data object.
-Handling raw JSON objects is really painful and hard to maintain.
 ex:-Users have a firstName and a lastName.the full name of the user within the templates looks like this:
     <li *ngFor="let user of users">{{ user.firstName }} {{ user.lastName }}</li>
	what if customer calls and tells that the order of firstname and lastname should be switched,go through every template and switch the expressions.
-But if our user is a User object, we can simply implement a function to print the fullname.
 
-Another good reason for using models is type enforce. We want to know the type of things when we use them and not just define everything as any.

-Interfaces are used in Typescript to perform type-checking,Interface cannot be used to instantiate.
-Classes are used not only for type-checking but also if we need some methods,they are used to instantiate.


InterFace As Model: fields mentioned in interface can only be used in view.
Class As Model: Structure Enforcement + Logic (fullName() , annualSalary())



Http Interceptor
================
-interceptors are used to pre-process and post-process the HTTP request.
-Used before sending request and after getting response from the server. 

Use Cases:
-Add an Access Token or some custom HTTP header for all outgoing HTTP requests.
-Create a global Error catch incase HTTP Request fails.
-Create a mock response to test.
-Log all HTTP activity in the console.
-Catch HTTP responses to do some custom formatting (i.e. convert CSV to JSON) 
 before handing the data over to your service/component.


How to Use Interceptors
=======================
1. Create Interceptor ( ng generate interceptor logger)
	import { HttpInterceptorFn } from '@angular/common/http';
	export const logInterceptor: HttpInterceptorFn = (req, next) => {
	  console.log('I am Inetrceptor')
	  return next(req);
	};
2. register the interceptor (app.config.ts)
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([logInterceptor]))
  ],




Authentication Vs Authorization
===============================
-Authentication is the process of verifying a user’s identity.(login)
 Who You are
-Authorization Decides if you have access to a resource.
 What you can do
 



	
observables
***********
-An Observable is an entity that emits (or publishes) multiple data values (stream of data)over time and asynchronously.
-Observables are lazy collections of multiple values over time.
-Observables help to manage asynchronous data, such as data coming from a backend service.
-To use observables, Angular uses a library called Reactive Extensions (RxJS).
-used for event handling, asynchronous programming, and handling multiple values.


Promise vs Observables
**********************
-Promise return all the data at once, where as observable return multiple values over a period of time.
-promise is not lazy. observable is lazy(observable is not called until we subscribe to the observable)
-promise is not cancellable, where as observable can be cancelled using unsubscribe()
-Promise doesn't have operators, observable has different operators (map,filter,reduce,retry,tap,catchError)
 
Promises:
-----------
1. return a single value
2. not cancellable
3. more readable code with try/catch and async/await
4. no Operator support (map,filter,reduce,retry,tap)
5. then()

Observables:
-----------
1. multiple values over time
2. cancellable
3. support Operators like:- tap(),retry(),distinctUntilChanged(),map()
4. use Reactive Extensions (RxJS)
5. subscribe()


RxJS
====
-RxJS is a library for composing asynchronous and event-based programs by using observable sequences.

RxJS Operators
--------------
Creation			from, of, interval, range
Combination			forkjoin, combineLatest, concat, merge,mergeAll, startWith ,zip, race
Filtering			debounceTime, distinctUntilChanged, filter, take, takeUntil, first
Transformation		bufferTime, concatMap, map, mergeMap/flatMap, scan, switchMap
Utility				tap,delay,repeat
Error Handling      catchError , retry, retryWhen
Mathematical  		count, max , min , reduce





    // publisher
    const observable1 = new Observable((publisher) => {
      publisher.next('AAAAAAAA')
      publisher.next('BBBBBBBB')
      publisher.next('CCCCCCCC')
      publisher.next('DDDDDDDD')
      publisher.complete();
    });

    // subscriber
   this.producer1.subscribe({
    next: (v) => console.log(v),
    error: (e) => console.error(e),
    complete: () => console.info('completed')
   });
   
   
   
Digital Clock
=============
this.time$ = new Observable<string>(observer => {
   setInterval(() => observer.next(new Date().toLocaleTimeString()), 1000);
});






forkjoin()
---------
-forkJoin is an operator that takes any number of input observables passed as an array of input observables.
-This operator is best used when you have a group of observables and only care about the final emitted value of each.
-One common use case is if you wish to issue multiple requests on page load (or some other event) and only want to take action when a response has been received for all. this is similar to Promise.all()


movies - [ 1,2,3,4,5]
		1 - imdb API
		2 - imdb API
		

map() vs mergemap() vs concatmap() vs switchmap():
--------------------------------------------------
Map() :  For each value that the Observable emits we can apply a function in which we can modify the data
		 
mergeMap() = map + mergeAll
	-Merging values from two or more HTTP Calls.
    -MergeMap never cancels any of its inner observable. It waits for them to finish and emit value.
	-MergeMap does not care about the order.
	-inner observables might finish in an order that is different from the order in which they are subscribed
	-receive data from an observable (outer observable). For each of those values, you want to call another observable (inner observable) to get more data.
	-mergeMap the movie into an http request to IMDB and by that, to enhance your movie cards with this additional data
	
	outerObservable.pipe(mergeMap(OuterObservableResponse => {
      return this.httpClient.get(`https://jsonplaceholder.typicode.com/users/${OuterObservableResponse}`)
    })).subscribe(innerObservableResponse => {
      console.log(innerObservableResponse)
    })

	 
concatMap() = map + concatAll
    -Map values to inner observable, subscribe and emit in order.
	-concatMap waits for inner Observable to complete before taking items from the next inner Observable.
	-concatMap does preserve the order from outer Observable.
	-Like mergeMap, concatMap also doesn’t cancel any inner Observables. 
	 All data from inner Observables get to the final collection.
	-Queuing up every new Observable, and subscribing to a new observable only when the last observable completed.
    -If the order of emission and subscription of inner observables is important, try concatMap.
	
	
switchMap() = map + switch
	-Switching to the Most Recent Observable & cancelling previous observables.
	-SwitchMap emits items only from the most recent inner Observable.
	-SwitchMap cancels previous inner Observables when a new inner Observable appears. 
	-A very common use case for switchMap is a search Typeahead.
	 where we are no longer concerned with the response of the previous request when a new input arrives.
	-If only one inner subscription should be active at a time, try switchMap

   
ExhaustMap()
	-Map to inner observable, ignore other values until that observable completes.
	-“Do not disturb!” operator.
	-we have a login screen with a login button, where each click is mapped to 1 login request.
	-If the user clicks more than once on the login button, it will cause multiple calls to the server.
	-use exhaustMap to temporarily “disable” the mapping while the first http request is still on the go.
	-this makes sure you never call the server while the current request is running.




Hot and Cold Observables
========================
-A “hot” Observable begins emitting items as soon as it is created, and so any observer who later subscribes to that Observable may start observing the sequence somewhere in the middle.
-A “cold” Observable, waits until an observer/consumer subscribes to it before it begins to emit items,such an observer is guaranteed to see the whole sequence from the beginning.
-Normal Observables are 'cold', Subject,BehaviourSubject,ReplaySubject are 'hot'.


		
Subject
=======
-An observable allows us only to subscribe  whereas a subject allows us to both publish and subscribe.
-A subject allows our services to be used as both a publisher and a subscriber.
-Subjects are like EventEmitters: they maintain a registry of many listeners.
-Subject is a special type of Observable that allows values to be multicasted to many Observers,While plain Observables are unicast.
-data can be pushed into a subject and the subject’s subscribers will in turn receive that pushed data.
-The real power of subjects comes into play with multicasting, where a subject is passed as the 
observer to an observable,which will mean that, when the observable emits, the data is multicasted to all of the subject’s subscriptions.
-The 'asObservable' operator can be used to transform a subject into an observable.
-A subject can emit data, on top of having the capability to be subscribed to.
-To feed a new value to the Subject, just call next(theValue), and it will be multicasted to the Observers registered to listen to the Subject.
-use a Subject in a service to fetch some data, and send the result to all components that subscribed to that Subject.

-A BehaviorSubject is a Subject that can emit the current value
(Subjects have no concept of current value)
-With behavior subjects, it does not matter when you subscribe, 
you always get the latest value right away.


	Observable 							   Subjects  
=================================================================================
-Is just a function, no state        	-Has state. Stores data in memory
-Cold									-Hot   
-Code run for each observer           	-Same code run once for all observers
-Creates only Observable             	-Can create and also listen Observable
 ( data producer alone )                 ( data producer and consumer )      

-Usage: 							    -Usage: 
Simple Observable with only                        
one Obeserver.                       	* Store data and modify frequently  
										* Multiple observers listen to data


Observables
===========
1. They are cold: Code gets executed when they have at least a single observer.
2. Creates copy of data: Observable creates copy of data for each observer.
3. Uni-directional: Observer/subscriber can not assign value to observable.

Subjects (Subject,ReplaySubject,BehaviorSubject)
================================================
1. They are hot: code gets executed and value gets broadcasted even if there is no observer/consumer/subscriber.
2. Shares data: Same data gets shared between all observers.
3. bi-directional: Observer/subscriber can assign value to observable.


	subjects				Each Next Subscribers receive
=========================================================
Subject		 ---------- Only Upcoming values
BehaviorSubject-------  one previous value(current/initial) & upcoming values
ReplaySubject---------  all previous values and upcoming values
AsyncSubject  --------  latest value when stream gets closed (complete)



Assignment
==========
create 1 employee crud application using 'subject' 



What are signals
================
-A signal is a special type of variable that holds a value. it also provides notification when the variable value changes
-A signal is a wrapper around a value that notifies interested consumers when that value changes. 
-Signals can contain any value, from primitives to complex data structures.
-We read a signal's value by calling its getter function, which allows Angular to track where the signal is used.
-Signals may be either writable or read-only
-A signal is not a replacement for RxJS and Observables for asynchronous operations, such as http.get


Disadvantage of Change Detection
================================
-A change detection cycle runs very frequently even when something has not changed in the angular app. this can impact performance of angular application.


When to use Signals:
===================
Simple state management: 
	For managing individual values that change over time, like counters, user input, or flags.
Derived state: 
	to calculate values based on other value.
	When the user updates the quantity, the related variable(price) should react and adjust the price.
Side effects: 
	To trigger actions like API calls or DOM updates when a signal changes.



Declare Signal:
num: Signal<number> = signal(0);

Use Signal:
-Typescript : console.log('The count is: ' + count());
-HTML:  <h4>count value is {{count()}}</h4>

Check if Signal: 
let flag = isSignal(this.count);

	

Writable signals:
set(): Replaces the entire value.
update(): Modifies the value based on its current state.
mutate(): used to modify mutable values(array/objects) (Deprecated)

To change the value of a writable signal:
	count.set(3);  // when new value is not dependent op previous value
		(OR)
	count.update(value => value + 1); // update the value by using the previous value
	


Computed signals:
================
-Computed signals are read-only signals that derive/compute their value from other signals. 
-Computed signals are not writable signals. compilation error is thrown if we try to write value.
-Computed signals react and recalculate when any of its dependent signals change.
-Computed signals are lazily evaluated : computed function does not run to calculate its value until it is read 
-Computed signals are memoized : calculated value is cached, and if you read again, it will return the cached value without recalculating.

const count: WritableSignal<number> = signal(0);
const doubleCount: Signal<number> = computed(() => count() * 2);


Effects
=======
-Signals are useful because they notify interested consumers when they change. 
-An effect is an operation that runs whenever one or more signal values change.
 someEffect = effect(() => {
  console.log(`The current count is: ${count()}`);
  
  return ()=>{} // cleanup code
 });
-Effects always run at least once. When an effect runs, it tracks any signal value reads.
-Whenever any of these signal values change, the effect runs again.
-Similar to computed signals, effects keep track of their dependencies.
-Effects always execute asynchronously, during the change detection process
-effect() can only be used within an injection context such as a constructor

Use cases for effects:
-Keeping data in sync with window.localstorage
-Avoid using effects for propagation of state changes, Instead, use computed signals to model state that depends on other state

@Component()
export class EffectiveCounterComponent {
  readonly count = signal(0);
	  private loggingEffect = effect(() => {
		console.log(`The count is: ${this.count()}`);
	  });
}


Destroying effects:
-When we create an effect, it is automatically destroyed when its enclosing context is destroyed.
-effects created within components are destroyed when the component is destroyed.
-Effects return an EffectRef that can be used to destroy them manually, by calling the .destroy() method.
  ex: this.loggingEffect.destroy()

https://pasquale-favella.github.io/blog/16




Forms in Angular
================
-Forms are used to collect the data from the user.

1. Template driven
2. Model Driven Form / Reactive Form


Template Driven Forms Features
------------------------------
-Easy to use
-Suitable for simple scenarios and fails for complex scenarios
-Two way data binding(using [(NgModel)] syntax)
-Minimal component code and more HTML Code
-FormsModule needs to be imported

-Unit testing is a challenge(testing validation logic)
-limited capabilities to implement dynamic aspects like 
 variable number of fields, repetitive fields, etc.


Model driven forms/Reactive Forms 
---------------------------------
-More flexible
-Handles any complex scenarios
-More component code and less HTML markup
-Adding elements dynamically
-Better unit testing(testing validation logic)
-Supports creation of forms with dynamic structure at runtime
-Uses ReactiveFormsModule



Classes:
-------
ng-pristine : No user interaction occured/not yet modified
ng-dirty : User interaction occured/modified
ng-valid : It meets all the validation
ng-invalid : One of the Validation is not meeting
ng-touched: already touched (blur)
ng-untouched: not yet touched



Template Driven Form
--------------------
1. import FormsModule to our Component
   imports: [FormsModule]

2. view/HTML File-
   a. use ngForm directive with form's template reference variable
      <form #myForm="ngForm" ></form>
	  
   b. Use ngModel directive with every input field 
      <input name="firstName" ngModel /> 
   
   c. use ngModelGroup directive to group multiple fields
	 <fieldset ngModelGroup="address">...</fieldset>

3. Receive the data in component class from our form
   <form #myForm="ngForm" (submit)="printFormData(myForm)"></form>
   
   printFormData(formInfo) {
		console.log(formInfo.value);
   }
  



FormControl
-----------
-we can get access to the FormControl instance by assigning ngModel to the element.
 <input type="text" name="firstname" #fname="ngModel" ngModel>
-the variable #fname holds the reference to the firstname FormControl. 
 We can then access the properties of FormControl, like: value, valid, invalid, touched etc.
  <h3>{{fname.value}}</h1>
 
 

Set value in template-driven forms
----------------------------------
There are two ways we can set the value of the form elements:
1. Two-way data binding (recomended)
	user: any = { fname: 'sachin', lname: 'tendulkar' };
	
	<p>First Name: <input name="firstName" ngModel [(ngModel)]='user.fname'/></p>
    <p>Last Name: <input name="lastName" ngModel [(ngModel)]='user.lname'></p>
	
2. Use the template reference variable


Reset the form
--------------
<button type="reset">reset</button>
	(OR)
<form #myForm="ngForm" (reset)="reset(myForm)">
reset(myForm :NgForm) {
  console.log('Do Something...');
  myForm.resetForm();
}


Validation
----------
<input name="firstName" #fname="ngModel" [(ngModel)]='user.fname' required minlength="5" />
 <span *ngIf="fname.hasError('required') && fname.dirty" class="text-danger">Plz fill firstname</span>
<span *ngIf="fname.hasError('minlength') && fname.dirty" class="text-danger">Minimum 5 chars required</span>

<input type="email" name="email" #emailRef="ngModel" [(ngModel)]='user.email' required email />
<span *ngIf="emailRef.hasError('required') && emailRef.dirty" class="text-danger">plz fill email</span>
<span *ngIf="emailRef.hasError('email') && emailRef.dirty" class="text-danger">email format is not correct</span>



Assignment
----------
-Create a Registration form with validation (inputbox,radio,checkbox,dropdown,textarea)
https://www.tektutorialshub.com/angular/template-driven-form-validation-in-angular/



Model driven form
-----------------
1. import ReactiveFormsModule 
	a. import { ReactiveFormsModule } from '@angular/forms';
	b. imports:[ReactiveFormsModule]  
	
2. view 
	a. use formGroup with form
		<form [formGroup]="registerForm"> </form>
	b. use formControlName with every form field
		<input formControlName="firstname">
	c. use formGroupName to group multiple form fields.
	    <fieldset formGroupName="address">...</fieldset>

3. Component
	a. create FormGroup class Object to group fields
		new FormGroup({    })
	b. create FormControl class object for each form fields
		new FormControl()



Validate a form on change/blur/submit
-------------------------------------
lastname: new FormControl("tendulkar",
      { validators: [Validators.required], updateOn: "blur" }
    )	
new FormGroup({fName:new FormControl()}, { updateOn: 'submit' })




FormBuilder
===========
-Angular FormBuilder API makes it easier to build reactive forms.
-We can easily add the FormGroup, nested FormGroups, FormArrays & FormControls.
-Provides factory methods like .group() , .array() which simplify form creation


without FormBuilder
===================
loginForm = new FormGroup({
	  email: new FormControl('')
	  password: new FormControl('')
});


With FormBuilder
================
1. inject FormBuilder into our component class
    constructor(private formBuilder: FormBuilder) {
	}
2. loginForm = this.formBuilder.group({
	  email: [''],
	  password: ['']
	});


SetValue and PatchValue
=======================
SetValue: 
-It accepts an object that matches the structure of the FormGroup with control names as key.
-we need all control data to match the structure and then bind the data to the form
ex: this.myForm.setValue({fName:'abc',lName:'pqr',email:''})

PatchValue: 
-It accepts an object and does its best to match the values. 
-It can accept partial form group structure.
ex: this.myForm.patchValue({name:'UpdatedName'})
	


	
	
Routing
=======
-Single-Page Applications (SPAs) are Web apps that load a single HTML page and 
dynamically update that page as the user interacts with the application.
-Complete page reload doesn't happen. only a portion of a page gets loaded.
-Every time a link is clicked or the browser URL changes, Angular router makes sure our application reacts accordingly.

To accomplish that, Angular router performs the following 7 steps in order:
PRIGRAM
--------
Parse: it parses the browser URL the user wants to navigate to
Redirect: it applies a URL redirect (if one is defined)
Identify: it identifies which router state corresponds to the URL
Guard: it runs the guards that are defined in the router state
Resolve: it resolves the required data for the router state
Activate: it activates the Angular components to display the page
Manage: it manages navigation and repeats the process when a new URL is requested


Terminologies:
------------
router service: the global Angular router service in our application
router configuration: definition of all possible router states our application can be in
router state: a state of the router at some point in time, expressed as a tree of activated route snapshots
activated route snapshot: provides access to the URL, parameters and data for a router state node
guard: script that runs when a route is loaded, activated or deactivated
resolver: script that fetches data before the requested page is activated
router outlet: location in the DOM where Angular router can place activated components
URL segments: parts of the URL that are divided by slashes


Location Strategies
===================
Angular supports two Location Strategies:
1.HashLocationStrategy
	ex: http://localhost:4200/#/product
2. PathLocationStrategy
   ex: http://localhost:4200/product





routing Program:
----------------
1. create components
	ng g c home
	ng g c aboutus
	ng g c career
	ng g c notfound

2. in app.routes.ts configure all the routes.
	const routes: Routes = [
	  { path: 'home', component: HomeComponent },
	  { path: 'aboutus', component: AboutusComponent },
	  { path: 'careers', component: CareersComponent },
	  { path: '', component: HomeComponent },
	  { path: '**', component: NotfoundComponent },
	];

Note: all these routes:[] are used in app.config.ts
     provideRouter(routes)

3. use router-outlet in HTML & import 'RouterOutlet' in Typescript file
    <router-outlet></router-outlet>
   
   
4.  Add below code in Nav-bar.component.html  & import 'RouterLink' in Typescript file
   <a class="nav-link" routerLink="home" routerLinkActive="active-link">Home</a>
   <a class="nav-link" routerLink="aboutus">Aboutus</a>
   <a class="nav-link" routerLink="careers">Careers</a>
   


RouterOutlet
============
-Acts as a placeholder that Angular dynamically fills based on the current router state.
-Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, default value is "primary"
  <router-outlet></router-outlet>
  <router-outlet name='left'></router-outlet>
  <router-outlet name='right'></router-outlet>
-{path: <base-path>, component: <component>, outlet: <target_outlet_name>}
<router-outlet
  (activate)='onActivate($event)'
  (deactivate)='onDeactivate($event)'
  (attach)='onAttach($event)'
  (detach)='onDetach($event)'></router-outlet>
  


Active-Route
------------
<a routerLink="careers" routerLinkActive="active">careers</a>



Navigate from one route to another
----------------------------------
<button routerLink="/html">take me to HTML </button>			
			(OR)
constructor(private routerObj : Router) { }

  takeMeToHtml() {
    this.routerObj.navigate(['/html'])
  }


Navigate Previous / Next Route
==============================
1. Inject Location Service  
   import { Location } from '@angular/common';
   constructor(private location: Location) {
   }
2. user location service methods like: back() , historyGo()
   this.location.back()
   this.location.forward()
   this.location.historyGo(-2)
   this.location.historyGo(2)
   
	
  
Route-Parameter
---------------
1. Path Param
	ex:- /productDetails/101

2. Query param
	ex:- /search?searchWord=skybag&filter=something
	



nested/Child Routing
====================
-A child route is basically a route within a route. 

-Ex: there can be multiple components within a single Login route:
Forgot Password component
Signup component
Login component


{
    path:"products",
    component: ProductsComponent,
    children: [
      { path:"new", component: NewProductsComponent},
      { path:"featured", component: FeaturedProductsComponent}
	 ]
  }
-------------------------
<a routerLink="/products/new">New Products</a>
<a routerLink="featured">Featured Products</a>
<router-outlet></router-outlet>



	
Protecting routes with guard
----------------------------
-canActivate : Checks to see if a user can visit a route while navigating to a route
-canActivateChild : When Angular finds a canActivateChild guard attached to the parent route, it invokes it every time the user tries to navigates to the child route. Hence instead of attaching Guard service in every child, we can attach it to the parent route.
-canDeactivate : Checks to see if a user can exit a route while navigating from a route
-canMatch: helps in dynamically loading the components of our choice

Note:-canActivate Guard prevents unauthorized user from accessing the route. 
	But it does not stop the module from being downloaded. 
	The user can use the chrome developer console to see the source code. 
	The CanLoad Guard prevents the module from being downloaded.


Router-Guard
------------
1. create a guard by using below CLI command
   ng g guard auth 
   (change the logic inside the guard)   

2. in Route Configuration protect the route by adding canActivate:[myGuard]
   {
    path: 'productdetails/:id',
    component: productDetailsComponent,
    canActivate: [myGuard]
  },



Resolvers
---------
-Angular Resolver is used for pre-fetching some of the data when the user is navigating from one route to another. 
-It can be defined as a smooth approach for enhancing user experience by loading data before the user navigates to a particular component.
-resolver is an intermediate code that is executed between clicking the link and loading the component.
-We can use Angular’s Route Resolver class for fetching the data before our component is loaded.
-The router waits for the data to be resolved before the route is finally activated.
-While Swithing from List page to details page

 
Steps to use resolvers
----------------------
1. write a service to fetch data
	export class ProductService {
	   constructor(public http: HttpClient) {}
	   getProductDetails(id: number) {
		const url = `https://fakestoreapi.com/products/${id}`;
		return this.http.get(url);
	  }
	}
2. add a resolver and Access the Route Parameters in the Resolver
	export const productdetailsResolver: ResolveFn<Object> = (route, state) => {
		const id = +route.params['id'];
		return inject(ProductService).getProductDetails(id);
	};
3. Passing the Route Resolver to the Angular  Router
 ex: {
    path: 'products',
    component: ProductsComponent,
    resolve: { product: productdetailsResolver }
  }
4. Access the Resolved Data in the component
  constructor(private activatedRoute: ActivatedRoute) { }
  ngOnInit() {
    this.activatedRoute.data.subscribe((response: any) => {
      this.product = response.product; // to be shown in UI
    });
  }


Lazy Loading of components
==========================
-Lazy loading is the process of loading components, modules, or other assets of a website as they're required.
-Eager loading loads all of its components at once. This means that a lot of unnecessary libraries or modules might be loaded as well.
-For a small application this would be okay. But as the application grows the load time will increase if everything is loaded at once. 
-Lazy loading allows Angular to load components and modules as and when they're needed.

{ 
path: 'products',
loadComponent: () =>
            import('./components/product-list/product-list.component').then((x) => x.ProductListComponent)
}
		


@defer()
========
-To reduce the initial bundle size of our application.
-The content of the main @defer block is lazily loaded.
-any component that is written inside @defer, a separate CHUNK file gets created
-@defer blocks have several sub blocks to allow you to gracefully handle different stages in the deferred loading process.
-@placeholder is an optional block that declares content to show before the defer block is triggered.
  @placeholder (minimum 500ms)
-@loading block is an optional block that allows you to declare content that will be shown during the loading of any deferred dependencies
ex: @loading (after 100ms; minimum 1s)
-@error block allows you to declare content that will be shown if deferred loading fails.
 


@defer {
  <large-component />
} @placeholder (minimum 500ms) {
  <p>Placeholder content</p>
}

 
 


Angular Preloading Strategy
---------------------------
-Preloading in Angular means loading the Lazy loaded Modules in the background asynchronously, while user is interacting with the app. 
-This will help boost up the loading time of the app.
-when user navigates to a lazy loaded part of the app, the angular will have to download the module from the server.
-By Preloading the lazy loaded module, the user do not have to wait for the module to be downloaded as the module is already downloaded in the background
-Angular provides two built in strategies out of the box. 
	1. PreloadAllModules
	2. NoPreloading
-Add this code in app.config.ts 
  providers: [
    withPreloading(PreloadAllModules)
  ],

1.Eagerly Load the modules required at startup. 
 ex: authentication module, core module, shared module etc
2.Preload all frequently used modules, may be after some delay
3.Lazy load remaining modules

https://www.tektutorialshub.com/angular/angular-preloading-strategy/



Lazy loading a standalone component
===================================
-Any route can lazily load its routed, standalone component by using loadComponent

1. Remove the import at the top
   import { ProductListComponent } from './components/product-list/product-list.component';
2. use loadComponent() instead of component
 { path: 'productlist', component: ProductListComponent }
 
 {
 path: 'admin', 
 loadComponent: () => import('./components/product-list/product-list.component').then(response => response.ProductListComponent) 
 }




  
Web optimization and Build
---------------------------
-An Angular application consists mainly of components and their HTML templates. As the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

-Angular offers two ways to compile your application:

1. Just-in-Time (JIT) 
	-downloads compiler and compiles our application in the browser at runtime.
	-Loads the application slower than AOT since it needs to compile the application while running for the first time.
	-This was the default until Angular 8

2. Ahead-of-Time (AOT) 
	-compiles our application at build time.
	-Loads the page faster than JIT
	-This is the default mode, starting from Angular 9
	
-The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.


Note:- JIT compilation is the default when we run the ng build (build only) or ng serve (build and serve locally) CLI commands
	   ng serve (JIT)
	   ng build  (JIT)
	   ng build --aot (AOT)
	   ng build --prod (Production)
	   

JIT
===== 
-browser requires angular compiler and downloads at runtime.
-Compile TypeScript just in time(runtime) for executing it.
-Compiled in the browser.
-Each file compiled separately.
-No need to build after changing your code and before reloading the browser page.
-Suitable for local development.


AOT
====
-browser doesn't require angular compiler because it will be compiled in the build itself.
-Compile TypeScript during build phase.
-Compiled by the machine itself, via the command line (Faster).
-All code compiled together, inlining HTML/CSS in the scripts.
-No need to deploy the compiler (Half of Angular size).
-More secure, original source not disclosed.
-Suitable for production builds.
  
  
files
-----
Main.js : it contains all our application code. 
		  (components,pipes,services,directives,guards,resolvers)
		  
scripts.js: It contains the scripts you declare in the scripts section of your angular.json file.
		
runtime.js: it contains all the web-pack configuration details.

polyfills.js: it contains the code which make sure our application
			  runs in all browsers.

vendor.js: it contains all the 3rd party library deatils.
			(bootstrap,d3chart,ngx-pagination,ng2-search,sweetalert2)
			
styles.css   application css

lazy-loaded  components  (chunk-ABCDEF.js)

			
web-pack:
---------
-Webpack is an open-source JavaScript module bundler.
-Its main purpose is to bundle JavaScript files for usage in a browser.
-it is capable of transforming, bundling, or packaging any resource or asset.


> ng serve:
It Builds and serves the application. rebuilding on file changes.
	1. It doesn't create dist folder;
	2. generated files will be  stored in the internal memory
	3. we cann't run in external server.

> ng build:
compiles an application and stores the generated files in dist folder.
	1. It creates a dist folder
	2. generated files are be  stored in dist(that can be moved)
	3. generated dist folder can be placed in any server and application can be run. (tomcat/weblogic)




-Install a Local server and deploy our project
 1. install a server
	npm i -g serve 
 2. go to project folder(dist/project1) open command prompt and run the below command
    'serve'  or  'serve -l 7000'



https://angular.dev/tools/cli/deployment

Deploy Angular Application in GitHub
====================================
   git checkout -b mybranch1
1. 	 (OR)
   ng add angular-cli-ghpages
2. ng build --base-href angular_project_nov_2024
3. ngh --dir dist/angular_project_nov_2024/browser
   go to github website & open your Repository
   Settings Tab --> pages --> you should see the live URL

			(OR)
1. Create a GitHub repository for your project.   
2. Configure git in your local project
   git init
   git add .
   git commit -m "first commit"
   git branch -M main
   git remote add origin https://github.com/sanjaysamantra1/deploy_angular_in_github.git
   git push -u origin main
3. create a new branch for deployment
   git checkout -b mybranch1
4. Build your project using the GitHub project name
   ng build --output-path docs --base-href /project1/  
5. When the build is complete, make a copy of docs/index.html and name it docs/404.html
6. Commit your changes and push the code to branch
7. go to github website & open your Repository
   Settings Tab --> pages --> branch(main/branch1) -->  root/docs  --> save
   wait for 1 min project will be deployed, and live url will be seen 


  
Unit Testing Using Jasmine and karma
====================================
-Unit Testing is a type of software testing where individual units or components of a software are tested. 
-The purpose is to validate that each unit of the software code performs as expected. 
-Unit Testing is done during the development (coding phase) of an application by the developers. 
-Unit Tests isolate a section of code and verify its correctness. 
-A unit may be an individual function ,block, component, pipe , or directive.
 

-jasmine is framework for testing javascript code.
-karma is a test runner ( Runs the test cases & generates Report)

ng test/t --code-coverage=true

 
Jasmine Terminologies
=====================
describe()  Test suite (Group of testcases)
it() 		test case / spec

expect(actual).matcher(expected);
expect(app.add(2,3)).toBe(5);


Matchers
--------
toBe();       // Primitives
not.toBe();
toBeDefined();
not.toBeDefined();
toEqual();			 // objects /arrays
toBeTruthy();  
toBeFalsy();  
toBeGreaterThan();
toBeLessThan();
toContain()


Jasmine Global Functions
------------------------
beforeAll()
beforeEach()
afterEach()
afterAll()

fdescribe() - focused describe. If it exists, jasmine will run only fdescribe spec and ignore other type of describe (describe and xdescribe).
xdescribe() - disabled describe. It will never be executed.
fit() - focused it()
xit() - disabled it()


Spy & Stub
==========
Spy: Used to track calls to a function without altering its actual behavior.
	 spyOn(obj, 'greet'); // spy
Stub: Used to replace the function's implementation to control its behavior during testing.
     spyOn(obj, 'greet').and.returnValue("Stubbed greeting!"); // stub


Stub
====
-stub is a function/object that replaces the actual behavior of a unit with a fixed response.
-stub avoids calling the real implementation by overriding the original function with our custom implementation.
-Allows to control the function behavior entirely.
	Replaces the original function with:
		A return value.
		A fake implementation.
-ex: if we are testing a function that writes a value to the database, we should write a stub that avoids the db interaction but returns a successful result.

function saveUser(userData, userModel) { 
  let result = userModel.create(userData)
  return result;
}

makeStub(userModel, 'create', () => {
  return true;
})

it("should return TRUE when the query succeeds", () => {
  let result = saveUser({
    name: "Fernando",
    password: "1234"
  }, userModel)
  result.should.be.true
})


Spy
===
-A spy is a tool used to observe and monitor the behavior of an existing function. 
-It allows to track if a function is called, how many times it’s called, with what arguments, and other behaviors. 
-it does not modify the original function unless explicitly configured to do so.

spyOn(someObj, 'func').and.returnValue(42);
spyOn(someObj, 'func').withArgs(2, 3).and.returnValue(5);


// app.js 
const app = {
  processData: (data) => {
    console.log('Processing data:', data);
    return data.length;
  },
  fetchData: () => {
    const data = ['item1', 'item2', 'item3'];
    return app.processData(data);
  },
};
module.exports = app;

// app.spec.js 
const app = require('./app');
describe('fetchData functionality', () => {
  it('should call processData with the correct data', () => {
    // Spy on processData,  callThrough() ensures the original implementation still runs
    spyOn(app, 'processData').and.callThrough();

    // Call fetchData
    const result = app.fetchData();

    // Assertions
    expect(app.processData).toHaveBeenCalled(); // Verify processData was called
    expect(app.processData).toHaveBeenCalledWith(['item1', 'item2', 'item3']); // Verify correct arguments
    expect(result).toBe(3); // Verify the return value
  });
});











Cypress for e2e Testing
========================
1. ng e2e  (OR)  npm i cypress --save-dev	  
2. npx cypress open
  
  




Angular flavours
================
AngularJS - Angular-1.x
Angular   - Angular-2,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18


AngularJs vs angular
--------------------
1. Javascript				1. Typescript
2. MVC						2. Component
3. CLI-No					3. CLI
4. filters					4. Pipes
5. Controller				5. Controller-No
6. $scope,$rootscope		6. No $scope (component class)
7. Unit testing 			7. Unit testing - better



Angular-4
---------
-a lot of improvements made to reduce the size of the AOT (Ahead-of-time) compiler generated code.
-In Angular 2 only TypeScript 1.8 version was supported, whereas, in Angular 4, it supports TypeScript 2.1 and TypeScript 2.2.
-The Animation features are separated from @angular/core package and added to @angular/animations.
-along with *ngif, we can use else block as well.
-Supports for email validator



Angular-5
---------
-Build Optimizer
-inputs:[],outputs:[] instead of @input,@output
-HttpClient instead of Http
-preserveWhitespace : false
-No need of i18n(Internationalization) polyfills (Internationalized date & currency pipe)
-exportAs
-supports TypeScript 2.3 
-titlecase pipe


Angular-6
----------
-Typescript 2.7.x supports
-ng add(added in angular-6)(install and download new packages)
-ng update (added in angular-6)(update and upgrade your packages)
-Declaring the providers:[] inside the service itself
-instead of <template>, we now use <ng-template>


Angular-7
---------
-TypeScript 3.1
-CLI prompts
	a. Do you want Routing
	b. css/scss/LESS
-Drag/drop module
-Angular Material & CDK (Component Development Kit)
-Virtual Scrolling (loads and unloads items from the DOM depending upon visible parts of lists)
-life-cycle hook (ngDoBootstrap) and interface (DoBootstrap) got added.
 Hook for manual bootstrapping of the application instead of using bootstrap array in @NgModule



Angular-8
----------
-Supports Typescript 3.4
-IVY Engine (new rendering engine that will produce smaller bundle sizes)
-preview of Ivy available (ng new angular-project --enable-ivy)
-Supports Web Workers
-Improved Lazy loading. dynamic import.
  { path: '/student', loadChildren: () => import('./student/student.module').then(s => s.StudentModule) }  
-Improvement of ngUpgrade.
 the ng build, ng test and ng run are equipped by 3rd-party libraries and tool
-The ViewChild and ContentChild decorators now must have a new option called static.
  

Angular-9
---------
-Typescript 3.7
-Optional chaining operator ( ?. )
-nullish coalescing operator (??)  
-improved NgStyle and NgClass
-CSS Custom Properties support
-The ViewChild and ContentChild decorators will have {static:false} bydefault.


Angular-10
----------
-Language support
-New default Browser Configuration
-Warning about commonJS imports
-Optional stricter setting - 'ng new --strict'
-Typescript 3.9
-TSLIB 2.0 & TSLINT v6
-Default bundle budget drop to 75%


Angular-11
----------
-Hot Module Replacement
 ng serve --hmr
-Automatic Inlining of Fonts
-Webpack 5 Support
-TSLint to ESLint


Angular-14
----------
-Standalone Components
-Strictly Typed Forms
-Angular CLI Auto-Completion
-Angular DevTools


Angular-15
----------
-Standalone components are stable
-NgOptimizedImage directive stable
-Better Stack Traces


angular-17 https://www.geeksforgeeks.org/angular-17-whats-new/
----------
-Typescript 5.2
-Deferrable views
	@defer {
	  <large-component />
	}
-New built-in control flow,  @if() @else()
-View Transition API
-Server-Side Rendering


angular-18
----------
-New official documentation website
 angular.io  -->  https://angular.dev/tutorials/learn-angular
-Stable @defer()
-Material 3 graduated to stable in v18
-TypeScript 5.4
-redirects as functions
 {path:'',reDirectTo:'/home'}
 {path:'',reDirectTo:()=>{}}
-Signal APIs
-output()
  new EventEmitter()  -->  new Output()  



Update a project from 1 version to another angular version
==========================================================
https://angular.dev/update-guide



								

ShadowDom 
=========	
-Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree -shadow DOM tree starts with a shadow root.					
-ShadowDom isolates the DOM,so the DOM of the component is a separate element which won’t appear in a global DOM. 
-ShadowDom helps in scoping of the CSS,which means styles created inside the single Shadow DOM element are isolated and stays in the scope of that Shadow DOM. 




Virtual DOM
===========
-In Virtual-DOM copy of DOM is saved in the memory and while any change is done 
in the DOM, it’s compared to find differences. 
-Then browser knows which elements were changed and can update only those part of the application to avoid re-rendering all the DOM. 
-It’s done to improve the performance of the UI libraries. 
-Every change is done to the Virtual DOM, not to the original DOM, then the Virtual DOM is compared with the Document Object Model. 
-While the differences are found then browser know which elements in the original DOM should be updated and the update is done. 
-In the Virtual DOM concept, it’s possible to apply more than one change at once, 
to avoid re-rendering for every single element change.
-The biggest issue that Virtual DOM solves is the performance improvement on DOM manipulation.



-The only thing which is common for both is that they help with performance issues. 
-Both create a separate instance of the Document Object Model; besides this, 

-Virtual DOM is creating a copy of the whole DOM object.
-Shadow DOM creates small pieces of the DOM object which has their own, 
isolated scope for the element they represent.




Angular Material
================
-Material Design components for Angular.
-Angular Material offers a wide variety of UI components based on the Material Design specification.
-Autocomplte, Badge, Button, Card, DatePicker, Dialog, Icon, Menu, Paginator


How to use Angular-Material
---------------------------
1. ng add @angular/material
-The ng add command will install Angular Material, the Component Dev Kit (CDK), Angular Animations and ask you the following questions to determine which features to include:
-Choose a prebuilt theme name, or "custom" for a custom theme:
-You can choose from prebuilt material design themes or set up an extensible custom theme.
-Set up browser animations for Angular Material:
-Importing the BrowserAnimationsModule into your application enables Angular's animation system. 
Declining this will disable most of Angular Material's animations.

The ng add command will additionally perform the following configurations:
-Add project dependencies to package.json
-Add the Roboto font to your index.html
-Add the Material Design icon font to your index.html
-Add a few global CSS styles to:
-Remove margins from body
-Set height: 100% on html and body
-Set Roboto as the default application font
-You're done! Angular Material is now configured to be used in your application.

2. Display a component
 a. import { MatSliderModule } from '@angular/material/slider';
 b. <mat-slider min="1" max="100" step="1" value="1"></mat-slider>



Props Drilling
==============
-Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level.
-Solution : State management Library (NgRX)


Need Of state management
========================
-For smaller applications, it is fine to use components and services for application state management.
-It would become difficult to manage the application state when our application gets complex and big.



State Management using NGRX
===========================
-It helps developers build large-scale applications with heavy data communications while sustaining high application performance.

-NgRx provides a way to maintain data in our Angular application as a single source of truth.
-Instead of injecting services everywhere and managing communication between them,NgRx manages your application from one singular source.
 
UI-->Action-->Reducer-->Store(State)--->selectors--->UI


5 parts of NgRx:
-----------------
1.Store : application’s state is maintained in the store. The store is immutable.
components can subscribe to the store and get automatic updates of state through selectors
2.Reducers : All the state changes happen inside the reducer; 
			it responds to the action and, based on that action, 
			it will create a new immutable state and return it to the store.
A Reducer simply takes the action as an input and returns the new state according the action type and payload
3.Actions : modify the state of the store by using reducers (functions) that enable changes while keeping it immutable
4.Selectors : Selector is a function used for obtaining a part of the state from the store.
5.Effects : A mechanism that listens for dispatched actions in an observable stream,processes the server response, and returns new actions either immediately or asynchronously to the reducer to change the state
  
  
Key concepts
============
Actions describe unique events that are dispatched from components and services.
State changes are handled by pure functions called reducers that take the current state and the latest action to compute a new state.
Selectors are pure functions used to select, derive and compose pieces of state.
State is accessed with the Store, an observable of state and an observer of actions
  
  
Environments
============
https://angular.dev/tools/cli/environments


  
  
GraphQL
=======
-GraphQL overcomes major shortcomings of REST.
-A query language for your API.
-in REST, the client makes an HTTP request and data is sent as an HTTP Response.
-in GraphQL,the client Requests the data with queries.
-it allows the client to query only the data that they need.

-The most popular  GraphQL library is Apollo Client.  




Server-side rendering
=====================
-Server-Side Rendering involves rendering web pages on the server and sending fully rendered HTML to the client’s browser.
-This contrasts with traditional client-side rendering, where the browser fetches raw HTML and JavaScript, then constructs the DOM (Document Object Model) and renders the page.

Benefits:
-faster initial page loads
-Better SEO
-slow internet connections

Enable SSR:
	ng new project1 --ssr 		 (To create a new project with SSR)
	ng add @angular/ssr  (To add SSR to an existing project) 
		(OR)
	ng add @nguniversal/express-engine
	
Note : it the above command fails : delete package-lock.json,node_modules & try again
	
ng build 		    # This will build both the client and server bundles.
npm run serve:ssr   # This will serve your app on http://localhost:4000


Verify SSR:
Open your browser and visit http://localhost:4000. 
You should see the pre-rendered HTML in the page source.


Pre-rendered HTML: 
-When we view the page source (right-click > "View Page Source"), we see HTML content instead of just the Angular tags like <app-root>.
Dynamic Functionality: 
-Angular will take over once the client-side JavaScript is downloaded, and the app will behave like a normal SPA.
  
  
  
  
  
package.json vs package-lock.json
---------------------------------
-The package.json is used for more than dependencies - like defining project properties, description, author & license information, scripts, etc. 
 The package-lock.json is only used to lock dependencies to a specific version number.
-package.josn is required , package-lock.json is optional.
-To avoid differences in installed dependencies on different environments and to generate the same results on every environment we should use the package-lock.json file to install dependencies.
-package.json records the minimum version needed by the app ,
 package-lock.json records the exact version of each installed package. 
-in package.json (~) tells go up to hot-fixes 1.4.X if 1.4.1 is installed
 in package.json (^) checks if there is a newer version under 1.x.x if 1.4.1 is installed
 in package-lock.json - there is neither ~ nor ^
 
 
 
 
Dependencies VS Dev-Dependencies
================================
- if we need any libraries only at the time of development but not in production, those libraries
  should be added to DevDependencies.
  (karma,jasmine,tslint,eslint,cli)
  ex: npm i --save-dev eslint
  
- if we need a library in both development and production environment, then those libraries should 
  be part of dependencies.
  (bootstrap,sweetalert,react-modal)
  ex: npm i eslint
 
 
 
 
TreeShaking
===========
-tree shaking is a good mechanism for reducing the size of an Angular application.
-Tree shaking is the ability to remove any code that we are not actually using in our application from the final bundle. 
-It's a step in build process that removes unused code. 
-The 'target'&'module' of the compilerOptions are key for tree shaking. 
-We are telling Typescript to transpile our code to ES5 ("target": "es5") while preserving  the import keyword for our modules ("module": "es2015"). 
-This combination of values were not allowed in Typescript 1.x.
-tsconfig.json
 "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    ...
  }
  
 

 
Traceur Compiler
----------------
-Traceur is a compiler for typescript programming language which takes typescript classes, generators, and compiles it to javascript that our browser understands.




CORS
====
1. create proxy.conf.json inside src folder & add the below code
	{
	  "/api/*": {
		"target": 'http://localhost:3000',
		"secure": false
	  }
	}
2. Add a proxyConfig key to angular.json
   "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },
3. ng serve 



APP_INITIALIZER
===============
-The APP_INITIALIZER token in Angular allows to execute some logic or load data during the application's initialization phase, before the app becomes usable. 
-This is useful for tasks like fetching configuration data, initializing services, or running custom setup logic.
-The provided functions are injected at application startup and executed during app initialization.
-If any of these functions returns a Promise or an Observable, initialization does not complete until the Promise is resolved or the Observable is completed.
-This ensures your application starts only after essential setup is complete!
-Used for below use cases
	Fetching remote configurations.
	Authenticating a user via token.
	Initializing feature flags or other global state.








ng add @angular-eslint/schematics@14




Reference
=========
https://testbook.com/interview/angular-architecture-interview-questions
https://desireinfotech.biz/assets/download/Angular-Course.pdf