Import components.txt

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

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

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

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

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

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

7. Run the project / Start the project
   in command prompt go to the project directory (ex: c:/users/sanjay/angular/project1)
   Run the Below command 
   ng serve 
	  (OR)
   ng serve --open / 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




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


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

2-way Binding:
	1. import FormsModule and add it to our Module(App.module.ts)
		a. import { FormsModule } from '@angular/forms'
		b. imports: [ BrowserModule,FormsModule]
	2. in view file use [(ngModel)]='variable'
		<input type="text" [(ngModel)]='x'>




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





Importing Table headings dynamically from json file ( API alos ) i.e., not typing the headings for table:
=========================================================================================================
export class UsersComponent {
  colNames = Object.keys(this.users[0]); //in .ts file

<thead>    //in .html file
    <tr>
        <th *ngFor="let colName of colNames">{{colName}}</th>
        
    </tr>
</thead>





Itterating objects from json file:
==================================

keyvalue pipe
-------------
<h3 *ngFor="let entry of user | keyvalue">
  {{ entry.key }}---{{ entry.value }}
</h3>

<tbody>   //in .html file
    <tr *ngFor="let user of users">
      <!--Itterating Rows-->
      <td *ngFor="let entry of user | keyvalue">
        <!--Itterating (objects) Columns-->
        {{ entry.value }}
      </td>
    </tr>
</tbody>





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

2. add ngxpaginationModule to our module
   import {NgxPaginationModule} from 'ngx-pagination';
   imports: [BrowserModule, NgxPaginationModule]
   
3. use the below code in html
	<ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>               
    <pagination-controls (pageChange)="p = $event"></pagination-controls>



ng2searchfilter
---------------
1. install the library
   npm i ng2-search-filter

2. add the module to our module
   import { Ng2SearchPipeModule } from 'ng2-search-filter';
   imports : [Ng2SearchPipeModule]

3. use the below code in HTML file
   <input type="search"  [(ngModel)]="searchText">
	
   <h1 *ngFor='let x of names | filter : searchText'>
    {{x}}
   </h1>


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

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

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

ChangeDetector
-------------
- Session 46
- Pushing changes from parent to child
- changeDetection: ChangeDetectionStrategy.OnPush
- changeDetection: ChangeDetectionStrategy.Default
- ngDoCheck() {
    this.changeDetectorRef.markForCheck();
  }

@ViewChild
----------
ngAfterViewInit() {} for DOM manipulations

Angular Services 25thJan Session 48
------------------
 > share logic/data across components.
 > code Reuseability
	(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)