angular Notes.txt

Angular installation
====================
1. download Nodejs and install 
   https://nodejs.org/en/download/
   Need Nodejs to build, develop, test and manage the packages in angular application
   nodejs helps for tooling , not the execution environment for angular

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
		mmuni
   npm install -g @angular/cli@latest
		OR
   npm install -g @angular/cli@19
Note: for MAC if the above command doesn't work plz add sudo (sudo npm install -g @angular/cli)

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)
   npx ng new project1 --defaults
   
   you will be prompted for few things, just press '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   		(step-8 is required)
	  (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


ng new angular-wheather-app --standalone --style=css --routing=false --skip-tests --defaults
			(OR)
npx @angular/cli new angular-wheather-app --standalone --style=css --routing=false --skip-tests




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


Browser Extensions
===================
1. Mobile Simulator
2. Angular DevTools
3. Redux DevTools
4. Json Viewer



Angular
=======
-Angular is a 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)


SPA (Single Page Application)
===
-Loads a single HTML page initially, Dynamically updates content without refreshing the entire page.
	Initial Load: Browser downloads one HTML, CSS, and JavaScript bundle.
	Navigation: Instead of asking the server for a new page, JavaScript changes the view in the browser.
	Data Fetching: Content is fetched asynchronously (AJAX/fetch/axios) from APIs.
Advantages : Faster navigation, Better user experience
Disadvantages : SEO challenges , Large initial load




	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,chart.js
-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 Component
5. 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 building blocks of angular applications. Each component controls a part of the user interface.
-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.dev/api/core/Component

@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 generate component my-new-component / ng g c 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.dev/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.




How to Use Bootstrap in Angular 
===============================
-Bootstrap can be used in Angular either by using:
	1. CDN   2. installing 

1. CDN : Paste the below 2 libraries in index.html
-------------------------------------------------
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" />

2. 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
===========
-Synchronization of data between Component(TS) and view(HTML).
-Allows to bind component's properties/data to the view.
-when component's properties/data change, the view is automatically updated.

1.  interpolation  	 {{ }} (1-way)   (component-->view)
2.  property Binding  [ ]  (1-way)   (component-->view)
	bind-property (bind-innerHTML / bind-src)
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: to bind text-content/expressions to an element, converts the bound value to a string.
Property: assigns the bound value to a DOM property, preserves the type of the bound value.
2-way : When user updates the view, component's data is also updated, and vice versa.


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. 
      'maxlength' is attribute whereAs 'maxLength' is property
	  

Common Attributes that require attr. binding
=============================================
-There is no matching DOM property :  aria-label , aria-hidden , aria-expanded
-Attribute and property names are different : colspan , maxlength , 



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 and a toggle button; on clicking the button, control the visibility (Show / Hide) of the paragraph.
2. Create a dropdown with state names; when the user changes the dropdown value, print the selected value in a div.
3. create a input box, toggle the type of that input box to (text/password)
4. Create a counter example with three controls: Increment, Decrement, and Reset.
5. Create an inputBox to enter temperature in celcius, convert temperature from Celsius to Fahrenheit. 
	formula:  f = (C × (9/5)) + 32
6. greeting based on time (good mornig, good afternoon, good evening)
7. Create a textarea with maxLength = 100; as the user keeps typing, count and display how many words and how many characters are typed and  also display remaining characters.
8. Create two input boxes and a dropdown (+ , - , * , /) and perform arithmetic operations based on the selected operator.
9. Create a button that increases font size and another button that decreases font size for a paragraph.
10. Create a dropdown with colors and change the background color of a div based on selection.


	
	
	
CSS
****
1. inline 		(style attribute)
2. internal		(style element/tag)
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 allows to control how styles are applied to components. 
-Prevents styles from one component affecting other components.

Angular provides below encapsulation strategies:
1. Emulated (default) - styles from main HTML(index.html/styles.css) 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. 
applicable to any HTML element of 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.
			   
4. ExperimentalIsolatedShadowDom : fully isolated Shadow DOM behavior, for Building Web Components, micro frontEnd 

ex:- encapsulation: ViewEncapsulation.Emulated(default) 
	 encapsulation: ViewEncapsulation.None
	 encapsulation: ViewEncapsulation.ShadowDom
	 encapsulation: ViewEncapsulation.ExperimentalIsolatedShadowDom
	 
Emulated: Global CSS--->parent Component (yes)
		  Global CSS-->child component (yes)
		  Parent(Emulated) --> child(Emulated) (No)
		   
None: Global CSS<--->parent Component(None)<-->child component

ShadowDom: Global CSS--->parent Component(shadowDOM) (No)
		   Global CSS-->child component (No)
		   Parent (shadowDOM) --> child(Emulated) (Yes)		   
		   Parent (shadowDOM) --> child(ShadowDom) (No)
		   
ExperimentalIsolatedShadowDom: Global CSS--->parent Component(shadowDOM) (No)
		   Global CSS-->child component (No)
		   Parent (shadowDOM) --> child(Emulated) (Yes)		   
		   Parent (shadowDOM) --> child(ShadowDom) (No)		  
	 




Directives
**********
-Directives Enhance the power of HTML elements.
-Extend the functionality of HTML Elements / Add Additional behaviour.
-Before Angular 17  (*ngIf , *ngSwitchCase, *ngFor)
-After angular-17  (@if , @else , @switch , @case , @default , @for, @empty , @let)

1. Structural Directives : 
   Directive which changes the layout/structure of the DOM.
	
2. Attribute Directives : ([ngStyle],[ngClass])
   Directive which changes behaviour/appearance of the DOM 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 $index){
	  <h4>{{car}}----{{$index}}</h4>
	} @empty {
	  Empty list of cars
	}
2. @for() with String
   @for(char of str;track $index){
		<div>{{char}}</div>
   }
 
3. @for with Iterable objects (Map)
   @for (entry of myMap; track $index){
       <div>{{entry[0]}} === {{entry[1]}}</div>
	}

Local variables inside For Loop:
-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.

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




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



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]='num % 2 == 0 ? 24 : 36'> Add style with unit </p>
<p [style.background-color]=" num % 2 == 0?'green':'blue' "> Add style conditionally </p>
<p [ngStyle]="num % 2 == 0 ? myStyle1 : myStyle2"> NgStyle for multiple values </p>
<p [ngStyle]="myFunction()"> NgStyle for multiple values </p>
myStyle1 = { "color": "green", "backgroundColor": "red", "border": "3px dotted yellow" }


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

-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-1','common-class-2', { '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>


<span [ngClass]="{'pending':status=='pending','approved':status=='approved','rejected':status=='rejected'}">{{status}}</span>
.pending{color: orange;}
.approved{color: green;}
.rejected{color: red;}




Directive Assignment:
====================
1. Create an array of task objects, and display them using @for
   Every Element Should have a checkbox, When a checkbox is clicked, toggle completion status(true/false)
   for completed tasks show them as striked-out
   add a dropdown with 3 values 'All','Completed','Pending' , based on the value selected, show the tasks
   display how many are completed, ex: 2 out of 5 tasks are completed 

	tasks = [
	  { id: 1, title: 'Complete Angular assignment', completed: false },
	  { id: 2, title: 'Review pull requests', completed: true },
	  { id: 3, title: 'Prepare project report', completed: false },
	  { id: 4, title: 'Attend team meeting', completed: true },
	  { id: 5, title: 'Update documentation', completed: false },
	];
 
2. Create an array of products (https://fakestoreapi.com/products)
	Display the products in card format
	Show a dropdown for categories.
	When a category is selected, filter products.
	Use @empty when no products match. 
	
3. Maintain a cart array
	Use @for to display all cart items.
	Show each item with quantity controls (+ and – buttons)
	Calculate and display the total price
	cartItems = [
	  { id: 1, name: 'Wireless Headphones', price: 2499, qty: 1},
	  { id: 2, name: 'Smart Watch', price: 4999, qty: 2 },
	  { id: 3, name: 'Bluetooth Speaker', price: 1999, qty: 1 },
	  { id: 4, name: 'Power Bank', price: 1299, qty: 3 }
	];


4. Display Array of employees in a table
   a. Display Salary in green  if salary > 50000, else Display Salary in red, using [ngStyle]
   b. Apply a CSS class "inactive" to employees whose status is "Inactive" using [ngClass]
   c. Add bold font and blue color only for employees whose role is "Manager" using [ngClass]
   d. Apply a different row background color based on employee role:
		Manager = lightyellow , Developer = lightblue , Tester = lightpink
   e. Show salary in a badge style with dynamic color
      Green if salary > 70,000 , Orange if between 40,000–70,000, Red if < 40,000
	  
	 employees = [
        { id: 1, name: 'Amit Sharma', role: 'Manager', salary: 85000, status: 'Active', gender: 'male' },
        { id: 2, name: 'Priya Verma', role: 'Developer', salary: 65000, status: 'Active', gender: 'female' },
        { id: 3, name: 'Rahul Mehta', role: 'Tester', salary: 38000, status: 'Inactive', gender: 'male' },
        { id: 4, name: 'Sneha Iyer', role: 'Developer', salary: 42000, status: 'Inactive', gender: 'female' },
        { id: 5, name: 'Karan Singh', role: 'Manager', salary: 52000, status: 'Active', gender: 'male' },
        { id: 6, name: 'Neha Gupta', role: 'Tester', salary: 72000, status: 'Active', gender: 'female' }
     ];




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

-It’s a logical container that does not render any extra DOM element.
-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>).

<tr *ngFor="let emp of employees" *ngIf="emp.status === 'Active'">
only 1 structural directive is allowed per element

<ng-container *ngFor="let emp of employees">
  <tr *ngIf="emp.status === 'Active'">
    <td>{{ emp.name }}</td>
  </tr>
</ng-container>




ng-content/ Content projection
==============================
-Content Projection Allows a component to receive and display content from its parent component using <ng-content>
-Create configurable components. 
-Component with Dynamic Content.
-way to pass HTML (content) from a parent component into a child component’s template.
-content projection is achieved using <ng-content></ng-content> inside component’s template.
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>
<ng-content select="[modal-title]"></ng-content>

parent
======
<h1 id="div1">Registration Form</h1>
<h1 class="div2">Registration Form</h1>
<span>This is Modal Title From Parent<span>
<h2 modal-title>This is Modal Title From Parent</h2>



Read data from a JSON file 
==========================
1. create a JSON file (users.json)
   Paste the content from https://jsonplaceholder.typicode.com/users
   
2. in tsconfig.json add the below option  under 'compilerOptions'
    "resolveJsonModule": true,
	
3. import the data & use in component file (users.component.ts)
   import * as data from './user-data.json';
   
   userArr = (data as any).default; // inside class
   
4. use 'myProducts' in HTML file
   @for (user of userArr; track $index) {
      <div class="col-sm-3">user</div>
    }
   
   
   
Read Data from a typescript file (https://fakestoreapi.com/products)
================================= 
1. create a typeascript file and export the data (employees.ts/products.ts)
   export default [ {}, {}, {} ]
   
2. import the data & use in component file (products.component.ts)
   import productData from './products_data';  
   productsArr = productData;  // inside the class
   
3. use 'myProducts' in HTML file
   @for(product of productsArr;track product.id){
	<div></div>
   }
   
   


How to use font-awesome (https://fontawesome.com/v4/icons/)
=======================
1. ng add @fortawesome/angular-fontawesome 
			(OR)
   npm i @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons
   npm i @fortawesome/angular-fontawesome @fortawesome/free-regular-svg-icons
   npm i @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core 
 
   
2. import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   import { faStar } from '@fortawesome/free-solid-svg-icons';  / import { faStar } from '@fortawesome/free-regular-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 in cards
  https://fakestoreapi.com/products
-use font-awesome to display any icons (star icon for rating)
-implement pagination
-implement search functionality (Search By Title)
-implement sort functionality (Price Asc, Price desc)
-Show a dropdown for categories, When a category is selected, filter products.



How to use SweetAlert (https://sweetalert2.github.io/)
=====================	
1. npm i sweetalert2	
2. import sweet-Alert in our component
   import Swal from 'sweetalert2';	
3. on button click call a function, function should have the below code	
   Swal.fire('Good job!', 'You clicked the button!', 'success');
			(OR)
   Swal.fire({title: "The Internet?",text: "That thing is still around?",icon: "question",timer:5000,draggable: true});



How to use snackbar	
===================
1. npm i awesome-snackbar
2. import Snackbar from 'awesome-snackbar';
3. on button click call a function, function should have the below code	
	new Snackbar('Helloooo, Good Morning',
      { position: 'top-center', theme: 'light', timeout: 5000, actionText: 'X' }
    );

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. every row should have 'delete' button to delete Employee (ask user confirmation) 
4. every row should have 'view' button , view the details of selected employee in a modal (bootstrap Modal)
5. add a new employee to the table (insert a new record to the array)
   use SnackBar to display message ('Employee Added Successfully' - message should be maintained in a constant file)
6. use font-awesome to display any icons ( delete, edit, view )



Custom Directives
=================
-Custom directives are Created/used to attach custom behavior to elements in the DOM.
-Usecases: 
	auto-focus input
	change style on hover
	restrict input characters
	show tooltip
	disable right click
	disable copy/paste


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



@HostBinding  -  Bind a property on the host element.
@HostListener  - Listen events from the host element.
ElementRef - Gives direct access to DOM element
Renderer2 - Renderer2 is angular's safe abstraction for DOM manipulation


@HostBinding vs ElementRef
--------------------------
ElementRef : Gives direct access to DOM element
			 Usecases : Focus, scroll, attach events
			 this.ele.nativeElement.focus()
HostBinding : Binds directive state to host element
              Toggle CSS classes, styles, attributes
			  @HostBinding('class.active') isActive = true;


Custom Directive Assignment
============================
1. create a custom directive (zoomout) which scales the element by 150%.
   ng g d custom-directives/zoomout



	
Angular Pipes
=============
-Angular Pipes transform the data in templates without changing the original value.
-Pipes are used in template file, pipes take input data and return a transformed value.
-Transform strings, currency amounts, dates  etc.
-Pipes are part of CommonModule
Note : To Use pipes, CommonModule needs to be imported


 ex: {{ 5000 | currency }}    output: $5,000.00
            (OR)
<div [innerHTML]='name | lowercase'></div>


-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 / decimal
7.percent	
8.json  
9.keyvalue - Iterate Object
10.slice
11.async(Observable)


curreny
-------                  
  <div>{{ salary }}</div>
  <div>{{ salary | currency }}</div>
  <div>{{ salary | currency : 'USD' }}</div>
  <div>{{ salary | currency : 'INR' }}</div>
  <div>{{ salary | currency : '&euro;' }}</div>
  <div>{{ salary | currency : '&yen;' }}</div>
  <div>{{ salary | currency : 'USD' : 'code' }}</div>
  <div>{{ salary | currency : 'USD' : 'symbol' }}</div>
    <!-- input | pipeName : argument1 : argument2 -->
  
  
  
Date
-----
  <h5>Date pipe:</h5>
  <div>{{ dateObj | date }}</div>
  <div>{{ dateObj | date :'short'}}</div> <!-- Short Date + Short Time -->
  <div>{{ dateObj | date :'medium'}}</div> <!-- medium Date + medium Time -->
  <div>{{ dateObj | date :'long'}}</div> <!-- long Date + long Time -->
  <div>{{ dateObj | date :'full'}}</div> <!-- full Date + full Time -->
  ==================
  <div>{{ dateObj | date : 'shortDate' }}</div>
  <div>{{ dateObj | date : 'mediumDate' }}</div>
  <div>{{ dateObj | date : 'longDate' }}</div>
  <div>{{ dateObj | date : 'fullDate' }}</div>
  =================
  <div>{{ dateObj | date : 'shortTime' }}</div>
  <div>{{ dateObj | date : 'mediumTime' }}</div>
  <div>{{ dateObj | date : 'longTime' }}</div>
  <div>{{ dateObj | date : 'fullTime' }}</div>
  ==============
  <div>{{ dateObj | date : 'dd-MMM-yyyy' }}</div>
  <div>{{ dateObj | date : 'hh:mm:ss a' }}</div>
  <div>{{ dateObj | date: "fullTime":"UTC" }}</div>
  <div>{{ dateObj | date: "fullTime":"IST" }}</div>
  <div>{{ dateObj | date: "EEEE" }}</div>  <!-- Weekday-->

Note: 
hh   12-hour clock   AM/PM (yes)
HH   24-hour clock   AM/PM (No) 
<div>{{ dateObj | date : 'HH:mm a' }}</div> (incorrect)
<div>{{ dateObj | date : 'hh:mm a' }}</div> (correct)





decimal/number
-------------
<div> {{100000000 | number}} </div>
<div>{{ 12.111222333 | number: "3.2-5" }}</div>
<div>{{ 12.1 | number: "3.2-5" }}</div>
<div>{{0.5 | number:'3.2-5'}}</div>

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
--------
keepOriginalOrder = ()=>0; // this function disables sorting of keys
sortByKeyAsc = (a:any,b:any)=>a.key.localeCompare(b.key);
sortByValueAsc = (a:any,b:any)=>a.value - b.value;

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


slice pipe
-----------
-slice pipe can be used with array and string
<div>{{cars | slice : 2 : 4}}</div>
<div>{{'Angular is a Framework' | slice : 0 : 7}}</div>
<div>{{'Angular is a Framework' | slice : 0 : -4}}</div>



Pipe Chaining
=============
-Applying multiple pipes sequentially, where output of one pipe becomes input of the next pipe

<div>{{ price | number : '1.2-2' | currency }}</div>
<div>{{ name | titlecase | slice : 0 : 10 }}</div>
<div>{{ today | date | uppercase }}</div>
<div>{{ user$ | async | json}}</div>



Custom Pipe
===========
-Custom Pipe allows to create our own data transformation logic and use it directly in angular template.

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(creditcard) which takes a creditcard as input and returns masked creditcard
   input :  1111222233334444  
   output : 1111-2222-3333-4444 
3. create a custom pipe called 'age' which takes a date as input and returns the age in years.
   input : 04-06-2020
   output : 5 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.
-Pure Pipes execute only when input variable changes, better Performance
-ImPure Pipes execute on every change detection, Performance Expensive
-to make a pipe impure
  @Pipe({
		name : 'account',
		pure : false
	})

Need Of Impure Pipe:
-------------------
-Pure pipes don't run when : Data Changes without reference change (push data in an array, change object prop)
-in such cases , angular cannot detect changes, Pure Pipe will not re-run , UI doesn't get updated	
-Impure pipe solves this problem by running that pipe on every change detection



	
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
=======================
-Angular Components need to communicate(share data/logic) with each other.

Parent -> Child       	inputs:[] & Property Binding
Child  -> Parent        outputs:[] & Event Binding
Sibling -> Sibling      Through the Parent
Unrelated Components    Service , rxjs 
Large Apps              NgRx (State management Library)


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;
   }



Assignment
==========
-Create a component(EmployeeCRUD), which holds array of employees.
-Create 2 Child Components(EmployeeTable , EmployeeAdd)
-Pass data from EmployeeCRUD to EmployeeTable, EmployeeTable should display the data in table
-add delete button against every employee(row) to perform delete operation
-EmployeeAdd component should have form to add a new Employee to the employee list
-all the logic/functions should be present in Parent Component(EmployeeCRUD)



component lifecycle hooks/method 
================================
-Components & Directives go through a series of lifecycle phases - from creation to destruction.
-For Each Phase angular provides lifecycle hooks(methods)


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()
-Constructor is a typescript class feature, not angular specific.
-Initialize class variables,dependency Injection.
-No Business Logic should be written in constructor. 
-Avoid : Http Requests, Complex Computations, DOM Manipulations


ngOnChanges()
-Called after constructor and before ngOnInit
-whenever @input() / inputs:[] property value changes
-ngOnchanges() will not be invoked if the component doesn't have inputs:[]
-inside ngOnchanges() we can access previous and current value of a variable.


ngOnInit()
-Invoked for every component when a component gets Initialized. After Component's Properties have been initialized.
-Called only once, after the first ngOnChanges. not after every ngOnchanges()
-Time Consuming Logic goes here. Ex:- Fetching Data, Complex Computations


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, we 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(and child view) has been fully initialized.
-is called once after ngAfterContentChecked.
-this is the best place for DOM manipulation. Access template elements using @ViewChild


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();




Angular Change Detection Strategies
====================================
-Change Detection is Angular’s mechanism for tracking data changes and updating the UI accordingly, ensuring the view always reflects the latest state.

Role of Zone.js:
-Angular relies on Zone.js to detect asynchronous events such as clicks, timers, promises, and HTTP responses. Zone.js patches browser APIs and notifies Angular when these events complete. Angular then triggers a change detection cycle, starting from the root component and checking the entire component tree.
-Zone.js cannot identify which specific component changed, so Angular must check all components. This can cause performance overhead, especially in large applications. This default behavior is known as the Default Change Detection Strategy.


A component is marked dirty when:
-An event occurs within the component or its children
-One of its input properties changes
-The developer manually triggers it using ChangeDetectorRef


There are 2 change detection strategies: 
		1. default  (CheckAlways)
		2. onpush   (CheckOnce)
-By default, Angular uses the Default strategy.
-In Default mode, whenever something happens (event, async call, input change, timer, etc.), Angular checks all components in the component tree to see if anything changed ? this can become slow in large apps.

OnPush
======
-When Zone.js triggers change detection, Angular starts from the root component and traverses the component tree. If it encounters an OnPush component, Angular checks whether it is marked as dirty. Only dirty components (and their children) are checked; otherwise, they are skipped, reducing unnecessary computations.







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




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

	
	

Angular Services
****************
-A Service in Angular is a class used to:
		Share data between Components.
		Handle Business Logic
		Call APIs
		Keep Components Clean
-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)
-Services are created to handle common usecases like : logging , Http , Authentication, utitlity

-Create a service using angular CLI
 ng generate service <serviceName>
		


steps to create and use service
--------------------------------
1. create a service (ng g s service-name)
	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 an instance of the 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. 
-Provides mentioned dependencies to a class when that class is instantiated.   

constructor(private myHttp:HttpClient){}
	OR
myHttp = inject(MathService); 



Assignment
==========
1. create an EmployeeService
	Service should have 1 variable.  ex: employees = [ {}, {}, {} {}]   
	Service should have 3 methods.   ex: getAllEmployees(), getMaleEmployees(), getFemaleEmployees()
2. inject EmployeeService 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





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.
-Angular application communicates with server Using 'HttpClient' module.


HTTP Methods
============
GET - Fetch Data from the server (ex: search products)
      Doesn't change Data
	  Safe, Idempotent, No Request Body
	  
POST - Send Data to create a new resource( sign up )
	   Fetch data securly    (send params in body not in URL)
	   Not Idempotent, Request Body

PUT - Replace an existing resource completely
      Idempotent, Full Update , Complete Object in Request Body
	    
PATCH - Update only specific fields of a resource
		update password/update mobile number 
		Idempotent, Partial Update , More Efficient than PUT, Request Body

DELETE - remove a resource/delete a record from DB 
		 Delete naukri account
		 Idempotent, No Body
		 
HEAD - Get Headers only	, Same as GET but no response body
       Used For Checking existance, performance checks
	   
OPTIONS - Returns Supported HTTP Methods
          Used in CORS
          Browser preflight requests		  
		 

PUT vs POST
-----------
-PUT for UPDATE operations, POST for CREATE operations.
-PUT is idempotent, where POST is non-idempotent.
-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
----------
-An HTTP method is idempotent if making the same request multiple times results in the same server state.
-The response may be same or different, but the data on the server doesnt change after the first request.
-POST is non-idempotent, Whereas GET,PUT,PATCH,DELETE are idempotent

POST   api/users
{'name':'sanjay','address':'Bangalore'}
1st request --> User Created ( id=10 )
2nd request --> User Created ( id=11 )
3rd request --> another User Created ( id=12 )
-Server state changes every time, POST is non-idempotent

PUT  api/users/1 
{'name':'sanjay','address':'Bangalore'}
1st request --> user becomes  (Sanjay,Bangalore)
2nd request --> user is still  (Sanjay,Bangalore)
10th request --> user is still  (Sanjay,Bangalore)
-Server state stays the same, PUT is idempotent



PUT vs PATCH
------------
-PUT is used to replace a complete 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 used to Test APIs.
 https://www.postman.com/downloads/


Free 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
   https://dummyjson.com/users/search?q=michael
   https://dummyjson.com/users
6. https://dummy.restapiexample.com/  (CRUD)
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
10. http://endeavourtech.ddns.net:8095/stockanalytics/stocks/getAllStockFundamentalsJPA
    http://endeavourtech.ddns.net:8095/stockanalytics/swagger-ui/index.html#/
11. https://httpbin.org/delay/5


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)(MAC: touch employees.json)
3.start json server(go to the folder where json file is present,run the below command in cmd)
   json-server 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



CSRF, or Cross-Site Request Forgery:
===================================
https://portswigger.net/web-security/csrf#what-is-csrf
https://portswigger.net/web-security/all-topics

-Angular looks for a cookie named XSRF-TOKEN.
-If found, Angular automatically adds a header X-XSRF-TOKEN with the same value to all unsafe requests.



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' })  // returns { body:[],status:200,ok:true}
 



models in Angular
=================
-A Model represents the structure/shape 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.
-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 to perform compile time type-checking, Interfaces cannot be instantiated.
-Classes are used as models when we need runtime objects with behaviour. 


Types of Models:
---------------
InterFace As Model: 
	1. Improves Readability
	2. Structure Enforcement : fields mentioned in interface can only be used in view.
	
Class As Model: 
	1. Improves Readability
	2. Structure Enforcement 
	3. Logic (fullName() , annualSalary())



Http Interceptor
================
-the place where we can write common logic that should be executed for all HTTP calls.
-interceptors are used to manipulate HTTP requests and responses.
-Used before sending request to server and after getting response from the server. 

Angular Service/Component Triggers API--> Interceptor --> modifies the Request --> Backend Server
Backend Server --> response --> Interceptor --> modifies the Response --> Angular Service/Component


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
***********
-Observables publish/emit data over the time asynchronously.
-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(successHandler,errorHandler)

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


RxJS
====
-RxJS is a library for 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, timeout
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
=============
currentTime$ = interval(1000).pipe(map(() => new Date().toLocaleTimeString()));





forkjoin()
---------
-forkJoin is an rxjs operator that takes array of observables.
-Allows to run multiple API calls in parallel and get the response once all complete.
-when we need to wait for several async tasks to finish.
-works like Promise.all()



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. (check the completion, ex:console)
	-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, we 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 our 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.
	-inner observables are sequential
	-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()
	-Ignore new requests until the curent one finishes. "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 we 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
=======
-A Subject is a special type of Observable that allows both subscribing and emitting values.
-A Subject can Emit values & can be subscribed also.
-a normal Observable  is unicast ( 1 Producer per Subscriber)
-a Subject is multicast — one emission is received by multiple subscribers. ( 1 producer sends values to many subscribers)
-Subjects act like EventEmitters, maintaining a list of observers/subscribers.
-Data is pushed into a Subject using next(value), and all subscribers receive it.
-Subjects are commonly used in services to share data between multiple components.
-A Subject can be exposed as a read-only Observable using asObservable() to prevent external emissions.




	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 1 subscriber/observer.
2. Creates copy of data: Observable creates copy of data for each observer.
3. Uni-directional: subscriber can only read data, 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: subscriber can read data, 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
==========
1. create 'employee' service, which holds employees data as Subject/BehaviorSubject.
2. Provide Methods addEmployee(), clearEmployee() in employee service
3. components can subscribe the observable present in service to read employee data and display 
4. implement add new Employee
5. Implement Delete Employee





What are signals
================
-A signal is a special type of variable that holds a value. it also provides notification when the variable 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/Observable/Subjects
-RxJS and Observables are meant 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:
count: 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(0);  // when new value is not dependent on 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/executes whenever the signals that it reads changes.
 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



Signal Assignment
=================
-Declare a signal to maintain array of todos
-Declare 2 computed signals 1.completedToDos  2.remainingToDos
-Display the todo list in a table or list format.
-Add a Toggle button for each row to toggle the isCompleted flag.
-Add a Delete button for each todo, to delete todo
-Implement Add ToDo Functionality








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-invalid : One of the Validation is not meeting
ng-valid : It meets all the validation

ng-untouched: not yet touched
ng-touched: already touched (blur)



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

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

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



FormControl & Validation
------------------------
-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>
  
	FirstName: <input name="firstName" #firstName='ngModel' [(ngModel)]='user.firstName' required minlength="5" />
      @if(firstName.hasError('required')){
        <span class="text-danger">FirstName is a required field</span>
      }
      @if(firstName.hasError('minlength')){
        <span class="text-danger">FirstName should have minimum 5 chars</span>
      }
 
 

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();
}




Forms With Signals
==================
-Signal Forms manage the form state using angular signals.
-Automatic synchronization between data model and the UI.


1. create a data model that holds form's data
   loginModel = signal({ email: '', password: '' });
   
2. pass the form model to form() to create field 
   import { form } from '@angular/forms/signals';
   loginForm = form(this.loginModel);
   
3. Bind HTML inputs with [formField] directive
   <input type="email" [formField]="loginForm.email" />
   
4. Read Field Value using value()
   <div>Email: {{loginForm.email().value()}} </div>
   
5. Update the field value with set()
   loginForm.email().value.set('virat@gmail.com')
	 
6. For validation add the below code
   loginForm = form(this.loginModel, (schema) => {
    required(schema.email, { message: 'Email is required' });
    email(schema.email, { message: 'Email Format is not correct' });
    minLength(schema.email, 5, { message: 'Email Should have minimum 5 chars' });
  });





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/HTML  File Changes
	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
	    <div formGroupName="address">...</div>

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' })




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'})



Reset Form
----------
-Resets 
	1. value
	2. Form State (touched/dirty)

HTML:  <input type="reset" value="Reset">

TypeScript : 
	<form [formGroup]="registerForm" (submit)="submitMyForm()" (reset)="resetMyForm()">
	resetMyForm(){
		// this.registerForm.reset();
		this.registerForm.reset({ firstName: 'Sanjay' });
	}



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: [''],
	  address: this.formBuilder.group({});
	});



	


	
	
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 careers
	ng g c contactus
	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">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
------------
1. <a routerLink="careers" routerLinkActive="active">careers</a>
2. import  RouterLinkActive in typescript file
   import { RouterLink, RouterLinkActive } from '@angular/router';
3. add css for 'active' class 
   .active{background-color: aquamarine;}



Navigate from one route to another
----------------------------------
<button routerLink="/home">take me to Home </button>			
			(OR)
constructor(private routerObj : Router) { }
takeMeToHtml() {
  this.routerObj.navigate(['/home'])
}
  


Navigate Previous / Next Route
==============================
1. Inject Location Service  
   import { Location } from '@angular/common';
   
   location = inject(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
	


Path Param
===========
1. create userDetailsComponent
   ng g c userDetails
   
2. add the below code in app.routes.ts
   { path: 'userdetails/:id', component: UserDetails }
  
3. add the below code in userList.html
   <button class="btn btn-primary" [routerLink]="['/userdetails',user.id]">Details</button>
		
4. add the below code in userdetails.comp.ts
  user: any = signal({});
  httpClient = inject(HttpClient);
  activatedRoute = inject(ActivatedRoute);
  ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      this.http.get(`https://jsonplaceholder.typicode.com/users/${params['id']}`).subscribe(response => {
        this.user.set(response)
      })
    })
  }

5. add the below code in userdetails.component.html
	<h5 class="card-title">{{user().name}}</h5>
    <p class="card-text">{{user().id}}</p>





Query Param
===========
1. create productDetailsComponent
    ng g c productDetails
	
2. add the component in route configuration
   {
    path: 'productdetails', 
    component: ProductdetailsComponent
  }
  
3. add the below code in products.html
   <button class="btn btn-primary mx-1" [routerLink]="['/productdetails']"
            [queryParams]="{id:product.id,name:product.title,price:product.price}">Details</button>
		
4. add the below code in productdetails.comp.ts
	  product: any;
	  activatedRoute = inject(ActivatedRoute);
	  ngOnInit() {
		this.activatedRoute.queryParams.subscribe(params => {
		  this.product = params;
		  console.log(params)
		})
	  }
5. display product info in product-details.html 
	<h3 class="text-center">Product Details</h3>
	<div class="col-sm-4 offset-4 card text-center">
		<div>{{product.id}}</div>
		<div>{{product.name}}</div>
		<div>{{product.price}}</div>
	</div>



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


Careers(Parent) --> Permanent Jobs & Contract Jobs (Children)

1. Configure child routes using 'children' inside app.routes.ts
  {
    path: 'careers',
    component: Careers,
    children: [
      { path: 'permanent', component: PermanentJobs },
      { path: 'contract', component: ContractJobs },
    ]
  }
2. in main/parent(careers.html) component add <router-outlet>
   <div class="row">
	  <div class="col-sm-3">
		<p><a routerLink="/careers/permanent">Permanent Jobs</a></p>
		<p><a routerLink="contract">Contract Jobs</a></p>
	  </div>
	  <div class="col-sm-9">
		<router-outlet></router-outlet>
	  </div>
   </div>  





routerLink vs [routerLink]
==========================
-routerLink takes a string as path/route , [routerLink] binds to a variable, an array, or an expression.


	
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 component from being downloaded. 
	The user can use the chrome developer console to see the source code. 

-canMatch Guard prevents the component from being downloaded.
-canMatch Guard works with only lazy-loaded modules/components.



Router-Guard
------------
1. create a guard by using below CLI command
   ng g guard auth 
   (change the logic inside the guard, to return true/false)   

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(main.js) at once. This means that a lot of unnecessary libraries or modules might be loaded as well.
-For a small application eager Loading 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').then((x) => x.ProductList)
}
	
	
	
	
	
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) 
 }


@defer()
========
-To reduce the initial bundle size of our application.
-The content of the @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>
}

Note:
@defer alone  : delays rendering, but no separate bundle.
@defer + dynamic import() :  delays rendering and triggers code-splitting (separate bundle).

ex: 
1. import the component dynamically(home.component.ts) // Import CommonModule
   largeComponent:any;
  constructor() {
    import('../large-component/large-component').then(m => {
      this.largeComponent = m.LargeComponent;
    });
  }
2. Render the component using ng-container
	@defer {
		<ng-container *ngComponentOutlet="largeComponent"></ng-container>
	} @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/








  
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.
  
 
Build & Deploy
===============
Build : preparing the application for browser
		Converting Source code in to optimized files 
		
Deploy : Moving/placing the bundled code in to a server, so that our application runs 24*7


> 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

Firebase hosting	
Vercel	
Netlify		
Amazon Cloud S3
GitHub pages
Hostinger


Deploy Angular Application in GitHub
====================================
1. Add angular-cli-ghpages package
    ng add angular-cli-ghpages / npm i -g angular-cli-ghpages
2. Build & Deploy
	ng build --base-href angular_project_feb_2025 
			(OR)
	ng build --output-path docs --base-href angular_project_feb_2025 
3. ngh --dir dist/angular_project_feb_2025/browser 
   ngh --dir docs/browser       
4. go to github website & open your Repository
   Settings Tab --> pages --> SelectBranch & Folder(gh-pages & root)
   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 /angular_project_feb_2025/  
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 vitest
==========================
-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, service.
 

-vitest testing framework powered by Vite (https://vitest.dev/guide/)


ng test
ng test --coverage

 
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()
toBeInstanceOf(Array);



Set-up & tear-down 
------------------
beforeAll()    1
beforeEach()   N Times
afterEach()    N Times
afterAll()     1


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


Spy & Stub
==========
Spy: Used to track calls to a function without altering its actual behavior.
	 Watches a real function (track calls, arguments , return values)
	 vi.spyOn(obj, 'greet'); // spy
Stub: Replaces a function with a fake implementation
      vi.spyOn(obj, 'greet').and.returnValue("Stubbed greeting!"); // stub
	  vi.spyOn(obj, 'greet').mockResolvedValue([ {}, {}])



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.

	vi.spyOn(app, 'fetchuserData').mockResolvedValue([
      { name: 'laksheet', age: 25 },
      { name: 'sanjay', age: 55 },
    ]);

    let userResponse = await app.fetchuserData();
    expect(userResponse.length).toBe(2);



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.component.ts
================
  processData(data: any) {
    console.log('Processing data:', data);
    return data.length;
  }
  fetchData() {
    const data = ['item1', 'item2', 'item3'];
    return this.processData(data);
  }


describe('fetchData functionality', () => {
  it('should call processData with the correct data', () => {
    const processDataSpy = vi.spyOn(app, 'processData'); // Spy For processData function
    const result = app.fetchData();
    expect(processDataSpy).toHaveBeenCalled(); // Verify processData was called
    expect(processDataSpy).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.
-Autocomplete, 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/Data Drilling
===================
-pass data (props) from a parent component to deeply nested child components, even if intermediate components don’t need the data.
-Solution : State management Library (NgRX)


Code Maintainability: Passing data through multiple layers makes the code messy.
Performance Issues: Unnecessary re-renders of components that don’t need the data.
Tightly Coupled Components: Makes refactoring difficult, as changes to data affect multiple components.

-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 our application from one singular source.
 
Store(State)--->selector--->UI/Component-->Action-->Reducer-->Store


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


store-devtools (https://ngrx.io/guide/store-devtools)
==============
1. Add 'Redux Devtools Extension' in browser (chrome)
   https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
2. Add below package in your angular project
   ng add @ngrx/store-devtools




  
  
Environments
============
https://angular.dev/tools/cli/environments


  
  
GraphQL
=======
-GraphQL is a query language for APIs developed by Facebook.
-GraphQL overcomes major shortcomings of REST.
-in REST for each resource we define multiple endpoints (GET,POST PUT,PATCH,DELETE)
-Instead of multiple endpoints, we expose a single /graphql endpoint where clients ask exactly for what they need
-in GraphQL,the client Requests the data with queries.



How It Works
============
-Clients send a query specifying exactly which fields and nested relationships they want.
-The server returns just that data in a single response.
-Strongly typed schema defines all possible queries and data types.

Advantages
=========
-No over-fetching or under-fetching: Clients get only what they ask for.
-Single request for complex nested data: Reduces network chatter.
-Strongly typed schema: Great for auto-generating documentation, validation, and tooling.
-Easier to evolve APIs: Adding fields doesn’t break clients.

-The most popular  GraphQL library is Apollo Client.  


| Feature                 | REST                       | GraphQL                        |
| ----------------------- | -------------------------- | --------------------------------|
| Endpoints           | Multiple per resource      | Single `/graphql` endpoint         |
| Data Fetching       | Fixed responses            | Flexible queries                   |
| Over/Under Fetching | Common                     | Rare                               |
| Versioning          | Usually via URL/versioning | Often avoided via schema evolution |
| Tooling             | Mature and simple          | Powerful but more complex          |
| Caching             | HTTP cache friendly        | Needs custom caching strategies    |
| Learning Curve      | Easier                     | Steeper                            |



Free GraphQL APIs
==================
https://countries.trevorblades.com/graphql
https://studio.apollographql.com/public/countries/variant/current/explorer





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
 
 
 
 
Angular application with security
=================================
1. Authentication : JWT (JSON Web Tokens) / OAuth2
2. Route Guards : Protect Angular routes using guards
3. Token Interceptor : Intercept HTTP requests to attach JWT
4. XSS (Cross-site Scripting) Prevention : Angular has built-in protections - Use {{ userInput }} instead of innerHTML
5. CSRF (Cross-Site Request Forgery) : If using cookies for auth , Use HttpOnly and SameSite=Strict/Lax
6. Secure Storage : Prefer in-memory storage over localStorage/sessionStorage for tokens, Do not store sensitive data (like passwords) in the browser
7. HTTPS & CORS : use HTTPS in production , Configure CORS correctly on the backend to accept requests only from trusted domains
8. Content Security Policy (CSP) : Configure CSP in your web server to restrict sources of scripts, styles, images, etc.
9. Dependency Security : Keep Angular and dependencies updated. npm audit fix
10. Logout & Token Expiry Handling : Invalidate tokens on logout, Handle token expiration gracefully (redirect to login, refresh token, etc.)
 
 
 
TreeShaking
===========
-It's dead code elimination process.
-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(Cross-Origin-Resource-Sharing)
====
-CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to prevent harmful cross-origin requests. 
-It blocks requests made from one origin(domain/protocol,port) to another origin unless explicitly allowed by the server.
-CORS allows servers to specify which domains can access their resources/API.

A cross-origin request happens when:
The protocol (HTTP/HTTPS), domain (example.com), or port (8080) differs from the origin where the browser is loading the page from.
For example, if a webpage at http://localhost:3000 tries to make an API request to http://api.example.com, this is considered a cross-origin request.


Key Features:
-Prevents unauthorized cross-origin requests: 
	By default, browsers block requests made from one domain to another (a different origin). The cors middleware enables specific domains or all domains to access your resources.
-Customizable origin policies: 
	We can whitelist specific origins, methods, and headers that are allowed to interact with your server.
 


How Does CORS Work
------------------
-When a browser detects a cross-origin request, it sends an HTTP OPTIONS request (Preflight request) before making the actual request. 
-The server must respond with appropriate CORS headers to indicate whether the request is allowed.
	Access-Control-Allow-Origin: https://example.com
	Access-Control-Allow-Methods: GET, POST, PUT, DELETE
	Access-Control-Allow-Headers: Content-Type, Authorization
These headers tell the browser which domains, methods, and headers are permitted.



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



Progressive Web App (PWA)
==========================
-A Progressive Web App is a web app that behaves like a native app
    Application opens offline after first load
	Offline Support via service workers
	installables (Add to Home Screen)
	Faster Loading
	Background Sync
	Cross Platform - browser / OS / device
	Push Notification
	
-PWA = Web + Native App Feel + Offline + Installable

-Angular has built-in tooling to turn any project into a PWA quickly.
 angular automatically configures service worker, manifest and icons
 







Angular application Performance Improvement 
============================================
1. Avoid Heavy Logic in Templates
   <div>{{ calculateTotal() }}</div>

2. use trackBy with ngFor 
   -without trackBy, angular re-renders the whole list when an item changes in the list, 
   -use trackBy to optimize rendering.
   @for (item of statesArr;track $index){}	
   
3. Use async Pipe Instead of Subscribe
   Auto unsubscribe, Cleaner code
   
4. Avoid using more impure pipes, use pure pipes

5. Change detection Startegy 
   changeDetection: ChangeDetectionStrategy.OnPush
   
6. Unsubscribe the subscriptions
	
7. Lazy Loading 
   Load module/component only when needed, not upfront when application starts
   loadComponent ,  dynamic Import makes a component to load lazily
   
8. Pagination instead of large data load
   Debounce API calls (search). ex: search$.pipe(debounceTime(300),distinctUntilChanged())
   
9. use shareReplay
	getUsers() {
	  return this.http.get('/api/users');
	}
	this.userService.getUsers().subscribe();
	this.userService.getUsers().subscribe();   // 2 API calls
	
solution:
	users$ = this.http.get('/api/users').pipe(
	  shareReplay(1) // 1=buffersize (Stores last 1 value, Replays to new subscribers)
	);
	this.users$.subscribe();
	this.users$.subscribe();

   
   
 



Security Threats
=================
1. Cross-Site Scripting (XSS)
	-malicious scripts injected into our app that run in user's browser.
	-Angular automatically escapes HTML {{}}
	-avoid using innerHTML
	-sanitize DomSanitizer
	-use dompurify(npm package) if we have to render rich HTML content

2. Cross-Site Request Forgery (CSRF)
   SameSite Cookies

3. Insecure Storage
   -storing sensitive data(JWT,Password) in plain text in localstorage / session storage
   -use encrypted storage
   -do not store passwords on client side
   -clear sensitive data on logout

4. ClickJacking
   









 
   
========================================================================
 
   
REST EndPoints : 
1. public APIs : APIs returns data before authentication
2. private APIs : APIs returns data after authentication





Reference
=========
https://angular.dev/
https://angular.dev/tutorials
https://angular.dev/tools/cli
https://angular.dev/tools/language-service
https://angular.dev/tools/devtools
https://testbook.com/interview/angular-architecture-interview-questions
https://desireinfotech.biz/assets/download/Angular-Course.pdf
https://v2.angular.io/docs/ts/latest/guide/lifecycle-hooks.html
ng add @angular-eslint/schematics@14