My HandBook on Angular

1) install Angular CLI: npm install -g @angular/cli
    [Note:Sometimes forms and http packages will not be installed inorder to do so, run the following commands:
    a) npm install -g forms/npm install forms(for installing forms package in node_module).
    b) npm install -g http/npm install http(for installing http package in node_module).
        -g stands for global, which simply means global installation.]
2) Create New Application: ng new project-name/application-name[Ex:angular-tour-of-heroes]
     (Note: The name of the project must not have white space, instead use – )
3) Serve the application/Run the Application:
    Go to the project directory and launch the application.
    cd project-name/application-name[Ex:angular-tour-of-heroes]
    ng serve – – open/-o[To open/run the Project/Application]
    (Note:The ng serve command builds the app, starts the development server, watches the source files, and rebuilds        the app as you make changes to those files.
    The – – open flag opens a browser to http://localhost:4200/)
4) Change the application title:
    Open the project in your favourite editor or IDE and navigate to the src/app folder.
    You’ll find the implementation of the shell AppComponent distributed over three files:
    app.component.ts— the component class code, written in TypeScript.
    app.component.html— the component template, written in HTML.
    app.component.css— the component’s private CSS styles.
5) Creating Components:
    ng generate component [component-name] / ng g c [component-name]
    ng generate component /sub-folder1/2/…/[component-name]
    Creating a component without a spec file:
    ng generate component [component-name] – – spec=false / ng g c [component-name] – – spec=false
          (OR)
    ng generate component [component-name] – – spec false / ng g c [component-name] – – spec false.
    Creating a component without a spec file, and without being imported  in app.module.ts:
    ng generate component [component-name] – – spec=false / ng g c [component-name] – – spec=false – – skip-import
          (OR)
   ng generate component [component-name] – – spec false / ng g c [component-name] – – spec false – – skip-import
6) Command prompt:
    a)open: Ctrl + ~
    b) close: Ctrl + C
    c) clear
7) To change the port of execution: ng serve -p [portnumber]
    (Ex: ng serve -p 3000)
    (note: give any port number, default port-number is:4200)
     To host and execute:
     ng serve – – host 0.0.0.0 – – open (OR)
     ng serve -h 0.0.0.0 -o (to run on default port)
     ng serve -h 0.0.0.0 -p 3000 -o(to run on user defined port)
8) For statement:The syntax is *ngFor=”let <value> of <collection>”.
     [Ex: *ngFor=”let hero of heroes”]
9)  Creating Services: ng generate service [service-name] / ng g s [service-name]
     (Ex: ng generate service hero)
10) Providing the service(i.e regestering service into app.module.ts):
      ng generate service [service-name] – – module=app / ng g s [service-name] – – module=app
     (Ex: ng generate service hero – – module=app)
11) Creating and providing service:
      ng generate service [service-name] – – module=app / ng g s [service-name] – – module=app
      (Ex: ng generate service hero – – module=app)
12) Creating Routing and adding it to the app.module.ts:
       ng generate module [routonFetchData()ing-page-name] – – flat – – module=app
       (Ex: ng generate module app-routing – – flat – – module=app)
       [Note:- – flat puts the file in src/app instead of it’s own folder.
       – – module=app tells the CLI to register it in the imports array of the AppModule.]
       A typical Angular Route has two properties:
       path: a string that matches the URL in the browser address bar.
       component: the component that the router should create when navigating to this route.
13) Install the In-Memory Web API package from npm:
       npm install angular-in-memory-web-api – – save
14) Note:
      If you neglect to subscribe(), the service will not send the delete request to the server!
      As a rule, an Observable does nothing until something subscribes!
      Confirm this for yourself by temporarily removing the subscribe(),
      clicking “Dashboard”,  then clicking “Heroes”. You’ll see the full list of heroes again.
      AsyncPipe
      As expected, the *ngFor repeats hero objects.
      Look closely and you’ll see that the *ngMatPaginatorFor iterates over a list called heroes$, not heroes.
      <li *ngFor=”let hero of heroes$ | async” >
      here, hero is a temporary variable, which must be declared with the help of the keyword  “let”.
      “of” is a keyword used to iterate through a specified set of values.
       heroes is the one consisting of a set of values.
       The $ is a convention that indicates heroes$ is an Observable, not an array
       The *ngFor can’t do anything with an Observable.
       But, there’s also a pipe character ( | ) followed by async, which identifies Angular’s AsyncPipe.
       The AsyncPipe subscribes to an Observable automatically so you won’t have to do so in the component class.
14) Installing Bootstrap: npm install – – save bootstrap/npm install – – save bootstrap@3
      {Note: in installing bootstrap@3, the notation @3 refers to installing of bootstrap version 3]
15) Using Bootstrap in our project after installation:
      goto project explorer->open project->src->{}.angular-cli.json->”styles”: ->
      then give the reference of bootstrap file as follows:
       “../node_modules/bootstrap/dist/css/bootstrap.min.css”
       Example:
       “styles”: [
       “../node_modules/bootstrap/dist/css/bootstrap.min.css”,
       “styles.css”
       ],
16) Using ng Model:
      Angular $ does’nt have the default library in order to load ng Model in order to do so,
      we must import the following library in AppModule.ts.
     AppModule.ts:
     import {FormsModule} from ‘@angular/forms’ and in imports section of @NgModule add  FormsModule.
     Declaration of ngModel in html page: <input type=”text” [(ngModel)]=”name”>
      [Note:in order to give dynamic value to the ngModel type, declare it in .ts file as [ngModel – name]=[‘ ‘]
      (Ex: name=’ ‘)]
      [Note2: the input tag designated with a void value must not be have a closing tag.
      Ex:<input type=”text” [(ngModel)]=”name”>
      in the above example the input tag is not assigned a value, hence it has a void value,
      Therefore, it must not have a closing tag.]
16) Plugins recommended: emmet
17) important imports to be added to app.module.ts:
      import { NgModule } from ‘@angular/core’;
      import { BrowserModule } from ‘@angular/platform-browser’;
      import{FormsModule} from ‘@angular/forms’;
      import{HttpModule} from ‘@angular/http’;
      under @NgModule in imports section:
      imports: [
      BrowserModule,
      FormsModule,
      HttpModule
      ],
18) if-statement syntax: *ngIf [Note:must use * as a prefix to ngIf, * is used since it is structural.
     *ngIf must be used the attributes like <p> tag]
      Ex:<p *ngIf=”ServerCreated”>Server was created, server name is {{ServerName}}</p>
19) Install Angular Augury extention to chrome for a a better debugging experience.
20) Simplified declarations using Constructors:
      Before:
          ex:ingredient.model.ts :-
               export class Ingredient {
               public name: string;
               public amount: number;
               constructor(name: string, amount: number) {
               this.name = name;
               this.amount = amount;
              }
           }
       After:
         ex:ingredient.model.ts :-
              export class Ingredient {
              constructor(public name: string, public amount: number) {
              }
            }
21) Lifecycle of Components:
   a) ngOnChanges: Called after a boundinput property changes.
   b) ngOnInit: Called once the component is initialized.
   c) ngDoCheck: Called during every change detection run.
   d) ngAfterContentInit: Called after content(ng-content) has been projected into view.
   e) ngAfterContentChecked: Called every time the projected content has been checked.
   f) ngAfterViewInit: Called after the component’s view (and child views) has been itialized.
   g) ngAfterViewChecked: Called every time the view (and child views) has been checked.
   h) ngOnDestroy: Called once the component is about to be destroyed.
22) Creating a Directive: ng generate directive [directive-name] / ng g d [directive-name]
      Ex: ng g d my-directive
23) if compile on save of visual studio does not work try these command:
       ng set – – global warnings.versionMismatch=false
                                              (OR)
       The problem may be related with Inotify Watches Limit on Linux.
       To solve to issue increase the watches limit to 512K
       sudo sysctl fs.inotify.max_user_watches=524288
       sudo sysctl -p – – system
24) Kill a program currently running in port 4200 commands:
       sudo kill $(sudo lsof -t -i:4200)
                        (OR)
       sudo kill `sudo lsof -t -i:4200`
25) Installing angular material complete guide:
       https://alligator.io/angular/angular-material-2/
26) Example for various angular material controls:
       https://stackblitz.com/edit/angular-material2-formgroup-issue?                                                 file=app%2Fapp.component.html
26) Installing firebase SDK:
       npm install – – save firebase
       Once installation is done goto appComponent.ts, then go to ngOnInit method,
       and then type the following code:
          ngOnInit() {
          firebase.initializeApp({
          apiKey: “AIzaSyCodykBIemB9N2FOn7PU93OIoRc1CB3SNY”,
          authDomain: “ng-recipe-book-505417.firebaseapp.com”,
        });
      }
     Note: the apiKey and authDomain veries for every user in order to get your own goto
               firebase console, then click on Authentication tab located on the left hand side,
               then in the authentication page click on web setup tab,
               then copy apiKey and authDomain.
27) Installing MySQL WorkBench:

28) Upload your csv file to a location and get the csv file data. Please try this:-

Component.html:-

<input type="file" class="upload" (change)="changeListener($event.target.files)">

Component.ts:-

public changeListener(files: FileList){
  console.log(files);
  if(files && files.length > 0) {
     let file : File = files.item(0); 
       console.log(file.name);
       console.log(file.size);
       console.log(file.type);
       let reader: FileReader = new FileReader();
       reader.readAsText(file);
       reader.onload = (e) => {
          let csv: string = reader.result;
          console.log(csv);
       }
    }
}

29)ng serve –host 0.0.0.0 -p 4200

30)running on pm2:

a) first run npm run build i.e npm i && npm run clean && ng build –prod(builds the project and creates a dist folder)

b) pm2 start datacaptive-scrapes-ui.js(pm2 start js file/ process name, note that in js file we have specified the project to run on port 3000)

c) pm2 list(lists all the process that are running)

d) pm2 stop datacaptive-scrapes-ui.js(pm2 stop js file/process name)

e) pm2 delete datacaptive-scrapes-ui(note it does not have the js extension, this command is used to delete the process)