---------------WSL-----------------------------------------------------
POUR ACCEDER AU REPERTOIRE WSL,SAISIR COMMANDES SUIVANTES :
	-SUR UN TERMINAL (BASH) :
		explorer.exe .
	SUR L'EXPLORATEUR WINDOWS :
		\\wsl$



--------------SH------------------------------------------------------
run .sh on windows
	bash name_file.sh


--------------ANGULAR ---------------------------------------------------------------

	IN THE FOLLOWING LINES WE WILL HAVE ALL LINKING TO ANGULAR.
	WE CONSIDER THAT NodeJs IS ALREADY INSTALLED LIKE THAT WE CAN USE npm

	-------COMMANDS------------------------
	RUN transalte : (translate  is in package.json in scripts)
	> npm run translate
	
	INSTALLATION OF ANGULAR
	> npm install -g @angular/cli 
	if you're getting errors when running npm install, you can often solve them by running npm install --legacy-peer-deps instead of npm install
	
	ANGULAR VERSION 
	> ng version
	
	CREATION OF ANGULAR PROJECT WITH A NAME 
	>ng new my-new-project
	
	CREATION OF ANGULAR PROJECT IN THE CURRENT DIR
	>ng new current-directory --directory=./
	
	CREATION OF COMPONENTS
	>ng generate component name-of-component
	
	COMPILATE AND RUN  THE PROJECT
	>ng serve
	
	/***************DIRECTIVES**************************/
	CHAQUE DIRECTIVE DEVANT ETRE UTILISE DOIT ETRE IMPORTER DANS <<app.module.ts>>
	
	-ngModel : permet d'écouter tout ce qu'on entre and de le stocker dans une propriété : ici <<name>>
	<input type="text" [(ngModel)]="name">
	<p>{{name}}</p>
	
	/******************COMPONENTS****************/
	LES APPLICATIONS <<ANGULAR>> SONT CONSTRUITES A PARTIR DE COMPOSANTS
	
	TOUT COMPOSANT CREE DOIT ETRE IMPORTER DANS <<app.module.ts>>
	
	AppComponent => component root
	
		-L'UNICITE DE CHAQUE COMPONENT EST GERE PAR SON SELECTEUR <<selector>> 
		-CHAQUE SELECTEUR PEUT ETRE DEFINI SOIT COMME UNE BALISE(selector:'app-nom-dossier-contenant-le-composant') OU COMME ATTRIBUT(selector:['app-nom-dossier-contenant-le-composant']) OU COMME CLASS(selector:'.app-nom-dossier-contenant-le-composant')
		
			**APPEL DE SELECTEUR EN TANT QU'ELEMENT : <app-nom-dossier-contenant-le-composant><app-nom-dossier-contenant-le-composant>
			**APPEL DE SELECTEUR EN TANT QU'ATTRIBUT : <div app-nom-dossier-contenant-le-composant><div>
			**APPEL DE SELECTEUR EN TANT QUE CLASS : <div class="app-nom-dossier-contenant-le-composant"><div>
		
		-PROPERTY BINDING IS ALWAYS WITH []
			** <button [disabled]="!isAllow" >buttonName</button> isAllow is a property of the component
		
		-event BINDING IS ALWAYS WITH ()
			** <button (click)="addSomething()" >buttonName</button> addSomething is a method of the component
			
		-GET EVENT BINDING ALWAYS WITH $event 
			**<input  type="text"  (input)="onUpdateInput($event)"> onUpdateInput is a method of the component with param
		
		-DIRECTIVES 
			-STRUCTURAL DIRECTIVES ALWAYS WITH * (STRUCTURAL DIRECTIVES SET THE DOM ) => POUR UN MEME ELEMENT ON NE PEUT PAS AVOIR 2 OU PLUSIEURS STRUCTURAL DIRECTIVES
				
				** EXPLE WITH IF :
					<!--derictive binding is always with *-->
					<!--if else in 2 lines-->
					<p *ngIf="serverCreated">Server was created, server name is {{name}}</p>
					<p *ngIf="!serverCreated">Server not created</p>
					<!--if else in 1 line-->
					<p *ngIf="serverCreated;else noServer">Server was created, server name is {{name}}</p>
					<ng-template #noServer>
						  <p>Server not created</p>
					</ng-template>
					<!--IF WITHOUT *-->
					<ng-template [if]="!serverCreated">
						  <p>Server not created</p>
					</ng-template>
			-ATTRIBUTE DIRECTIVES ALWAYS WITH BETWEEN [] (ATTRIBUTE DIRECTIVES NEVER SET THE DOM AND ONLY AFFECT THE ELEMENT ) => POUR UN MEME ELEMENT ON AVOIR 1 OU PLUSIEURS ATTRIBUTE DIRECTIVES
			
				**EXPLES WITH STYLES
					<p  [ngStyle]="{backgroundColor:getColor()}"  [ngClass]="{online:isOnline(),offline:!isOnline()}"></P>
					
			CREER SES PROPRES DIRECTIVES :  > ng g d my-own-name-of-directive 
								
				VA CREER UN DIRECTIVE QUI AURA POUR NOM appMyOwnNameOfDirective. Dans la class generate toujours rajouter dans le constructeur un elment de type ElementRef
				@HostBinding('style.backgroundColor') backgroundColor!:string; // Permet de definir une propriété se referencant  au backgroundColor
				@HostListener('mouseenter') mouseover(eventData : Event){
					////permet d'avoir un listener mouseover
				  }
				  @HostListener('mouseleave') mouseleave(eventData : Event){
					//permet d'avoir un listener mouseleave
				  }
				  @HostListener('click') click(eventData : Event){
					//permet d'avoir un listener click
				  }
				
				**EXPLES 
					<p  appMyOwnNameOfDirective></P>
			
		
		-DECORATEURS avec @		
		@Inpout() permet à un component enfant d'utiliser les datas venant d'un component parent
		@Output() permet à un component parent d'utiliser les datas venant d'un component enfant 
		
		-DIRECTIVE ngContent
		TOUT CE QUI EST PLACE ENTRE LES BALISES OUVRANTES ET FERMANTES D'UN APPEL DE COMPONENT (EXPLE : <app-exple-of-component></app-exple-of-component>) 
		EST PERDU SAUF SI DAND LE COMPONENT ON A <ng-content></ng-content>
		
		-LIFECYCLE
			** ngOnChanges() : EST APPELE QUAND LES PROPRIETES RECOIVENT DE NOUVELLES VALEURS VIA LE DECORATEUR  @Inpout()
			** ngOnInit() : EST APPELE UNE FOIS QUE LE COMPONENT EST INITIALISE
			** ngDoCheck() : EST APPELE LORS DE CHAQUE DETECTION DE CHANGENMENT DU COMPONENT (EXEMPLE : CHANGEMENT DE VALEUR D'UNE PROPRIETE )
			** ngAfterContentInit : EST APPELE A CHAQUE FOIS QUE LE CONTENU PROJETE VIA ng-content A ETE INITIALISE
			** ngAfterContentChecked : EST APPELE A CHAQUE FOIS QUE LA DETECTION DE  CHANGEMENT VERIFIE  LE CONTENU QUE NOUS PROJETONS DANS NOTRE COMPONENT
			** ngaAfterViewInit() : EST APPELE UNE FOIS QUE LA VUE (CONTENU) DU COMPONENT ET DE SES ENFANTS ONT ETE INITIALISES
			** ngaAfterViewChecked() : EST APPELE A CHAQUE FOIS QUE LA VUE (CONTENU) DU COMPONENT ET DE SES ENFANTS ONT ETE VERIFIES
			** ngOnDestroy() : EST APPELE UNE FOIS QUE LE COMPONENT EST SUR LE POINT D'ETRE DETRUIT

		-SERVICES :> ng g s name-of-service
			--LE SERVICE SERT A REGROUPER SOIT DES DONNEES SOIT UN ENSEMBLE DE FONCTIONS 
			--IL DOIT TOUJOURS AVOIR INJECTABLE :@Injectable()
			--QUAND ON INITIE UN COMPONENT, ON PEUT RAJOUTER UN SERVICE VIA provider:[NomService,Nom2Service,etc]
			-- TOUS LES COMPOSANTS SITUES EN DESSOUS AURONT ACCES A CES SERVICES SANS LES INITIALISES SI ON VEUT QUE CE SOIT LE MEME SERVICE QUI EST UTILISE PAR L'ENSEMBLE
			--POUR QU'UN SERVICE PUISSE ETRE VISIBLE PARTOUT DANS L'APPLICATION, IL FAUT LE RAJOUTER DANS LE TABLEAU <<providers>> du fichier app.module.ts
			--QUAND ON DECLARE UN EventEmitter DANS UN SERVICE, CERTAINS COMPONENT PEUVENT L'ACTIVER ET D'AUTRES L'ECOUTER via subscribe()
				** Exple : 
					1) DANS LE SERVICE  : statusUpdated=new EventEmitter<string>();
					2) DANS UN COMPONENT : instance-de-mon-service.statusUpdated.emit('valeur emise')
					3 DANS UN COMPONENT : instance-de-mon-service.statusUpdated.subscribe((valeur-attendue:string)=>alert('nouvelle valeur'+valeur-attendue))
	
/******************WHEN IMPORT ANGULAR PROJECT*******************************/	
- AFTER ADDING THE PROJECT
- GO TO THE PROJECT
-TAPE THIS : npm update --legacy-peer-deps

-WHEN ERROR: ng update @angular/cli @angular/core --allow-dirty --force

/*********************Update Angular CLI version Locally**********/
Navigate to your local Angular project folder and execute the below commands.

	rm -rf node_modules
	npm uninstall --save-dev angular-cli
	npm install --save-dev @angular/cli@latest
	npm install
	
	/********************ANGULAR WEB COMPONENT CREATION**************************/
			1° START NEW ANGULAR PROJECT : 
				> ng new my-web-components --create-application=false
			2° GENERATE WEB COMPONENT :
				> ng generate application my-first-web-component  --skipInstall=true
			3° ADD @angular/elements LIBARARY
				> ng add @angular/elements
			4° GEREATE COMPONENT WISHED
				> ng generate component my-component-generated
			5° ADD SHADOW IN THE THE COMPONENT GENERATED (in my-component-generated.component.ts)
				@Component({
					  selector: 'app-mon-composant',
					  template: 'Mon composant Angular',
					  encapsulation: ViewEncapsulation.ShadowDom //ONLY THIS IS ADDED
					}) 
			6° IN app.module.ts :	
				A) IMPORT Injector, DoBootstrap  and createCustomElement AND REMOVE 
					> import { NgModule, Injector, DoBootstrap  } from '@angular/core';
					> import { BrowserModule } from '@angular/platform-browser';
					> import { createCustomElement } from '@angular/elements';
				B) IN @NgModule : 
					> ADD THE COMPONENT GENERATED WITH  entryComponents: [myComponentGenerated]
					> REMOVE providers: [] AND bootstrap: [AppComponent]
				C ) REWRITE THE CLASS AppModule 
					- IMPLEMENTS DoBootstrap IN THE CONTRUCTOR AND REDIFINE IT
					- ADD AN INJECTOR IN THE CONTRUCTOR
					- ON ngDoBootstrap : INIT THE WEB COMPONENT CREATED 
							export class AppModule implements DoBootstrap{ 
							  constructor(private injector: Injector) {
								
							  }
							  ngDoBootstrap(): void {
								this.createWebComponent(MySiteConfigurationComponent, 'my-component-alias');
							  }
							  createWebComponent(component:any, name: string) {
								const webComponent = createCustomElement(component, {
								  injector: this.injector
								});
								customElements.define(name, webComponent);
							  }
							}
			7°  ON  angular.json : SET outputHashing TO NONE
				> "outputHashing": "none",
			8° ADD concat IN THE PROJECT :
				> npm install concat
			9° CREATE A NEW FILE(THAT WILL BE USED BY THE PROJECT USED THE WEB COMPONENT) build.js IN THE ROOT OF THE APPLICATION 
				> ADD THIS CODE : 
					const fs = require('fs');
					const concat = require('concat');const distFolder = './dist/my-first-web-component/';(function build() {
					  concatFile();
					})();function concatFile() {
					  const files = [
						distFolder + 'runtime.js',
						distFolder + 'polyfills.js',
						distFolder + 'main.js'
					  ];  concat(files, distFolder + 'component.js');
					}
			10° BUILD THE WEB COMPONENT :
				> ng build mYFirstWebComponent
			11° BUILD THE built.js :
				> node built.js
			12 ° NOW GO TO dist/my-first-web-component FOLDER AND COPY THIS FILES AND PAST THEM TO THE PROJECT USING THE WEB COMPONENT : 
				> component.js
				> styles.css
			13° IN THE PROJECT USING THE WEB COMPONENT : 
				> CREATE A FOLDER AND PAST FILES COPIED ON 12°
			14° IN FILE OF THE PROJECT USING THE WEB COMPONENT : 
				INTEGRATION OF THE WEB COMPONENT :
					A) IN THE HEADER : 
						<base href="" />
						<link rel="stylesheet" href="path-to-web-components-folder/styles.css" />
					A) IN THE body : 
						<my-component-alias></my-component-alias>
						<script src="path-to-web-components-folder/component.js"></script>