ES6 - Array intersection, Difference, symmetric => using Arrow Function

ES6 - Array intersection, Difference, symmetric =>
-----------------------------------------------------------------
There is a better way using ES6:
Intersection
============
 let intersection = arr1.filter(x => arr2.includes(x));
 For [1,2,3] [2,3] it will yield [2,3]. On the other hand, for [1,2,3] [2,3,5] will return the same thing.

Difference
==========
let difference = arr1.filter(x => !arr2.includes(x));
For [1,2,3] [2,3] it will yield [1]. On the other hand, for [1,2,3] [2,3,5] will return the same thing.

symmetric difference
====================
let difference = arr1.filter(x => !arr2.includes(x)).concat(arr2.filter(x => !arr1.includes(x)));

Ref: https://stackoverflow.com/questions/1187518/how-to-get-the-difference-between-two-arrays-in-javascript

NG5- Event Bubling

NG5- Event Bubling
-------------------------
DOM events provide a mechanism that can prevent bubbling. It is the stopPropagation method. 
@Component({
  selector: 'event-bubbling',
  template: `
    <div>
      <button (click)="onClick($event, 'Button 1')">Button 1</button>
      <button (click)="onClick($event, 'Button 2')">Button 2</button>
    </div>
  `
})
export class EventBubblingComponent {
  @Output() click = new EventEmitter();

  onClick(event: Event, button: string) {
    event.stopPropagation();

    this.click.next(button);
  }
}

E.g
----
<div (click)="hidetheDiv()"> <span (click)="maketheFunctionCall($event,item)"> API Call </span>  Close X</div>

  
  maketheFunctionCall(event:Event,item){
    event.stopPropagation();
    console.log("Make the API call", item)
  }
  
  hidetheDiv(){
  this.Div = false;
  }

NG5- Module - App.module.ts

NG5- Module - App.module.ts
========================

=>Angular apps are modular and Angular has its own modularity system called NgModules. NgModules are a big deal.

=>Every Angular app has at least one NgModule class, the root module, conventionally named AppModule.
=>While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities.

->An NgModule, whether a root or feature, is a class with an @NgModule decorato
NgModule is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are:

->declarations - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.

->exports - the subset of declarations that should be visible and usable in the component templates of other modules.

->imports - other modules whose exported classes are needed by component templates declared in this module.

->providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.

->bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property

generic.app.module.ts
---------------------

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }


Sample Ng-cli app.module at initial level
--------------------------------------------

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// import { routing } from './app.routing.ts';  =>  App routing file needs to include 
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ // import Angular's modules ->BrowserModule,    HttpModule,    RouterModule,    FormsModule,    ReactiveFormsModule, <= coresponding import statement as to add 
BrowserModule   
  ],
  providers: [],   // expose our Services and Providers into Angular's dependency injection  Mostly service files <= coresponding import statement as to add 
  bootstrap: [AppComponent]
})
export class AppModule { }

NG5- angular-cli change port to 3000 in angular-cli.json

NG5- angular-cli change port to 3000 in angular-cli.json or ng serve --port 3000 cmd
==========================================================

soln:1
--------

Edit with Angular-CLI 1.0.0

You can now directly define the used port in the .angular-cli.json file by defining the property like this:

{
    "defaults": {
"styleExt": "scss",
"component": {},
        "serve": {
            "port": 3000
        }
    }
}
Here is a direct link to all available options for the configuration: Angular-CLI options configuration

Soln:2
-------
Old Answer

You can configure it directly in your packages.json, change your start scripts by:

"start": "ng serve --port 2500",
And then run your server with npm start


this will override the .angular.cli.json file. app will run in 2500 port.


Soln:3
------
You can also try with this to run your application in visual studio code -:

ng serve --open --port 4201

you can give any port number. 

*** It will in open in default browser. e.g I.E edge in windows or your preferred browser.

Ref: https://stackoverflow.com/questions/41260194/angular-cli-change-port-to-3000-in-angular-cli-json