= Angular =
 * https://angular.io/guide/architecture
Angular is a platform and framework for building single-page client applications ('''SPA''') in HTML and [[typescript]]. 

The architecture of an Angular application relies on certain fundamental concepts. The basic building blocks are NgModules, which provide a compilation context for components. 

== Concepts from AngularJS ==
 * https://docs.angularjs.org/guide/concepts
  * '''Model''' - the data shown to the user in the view and with which the user interacts
  * '''View''' - what the user sees (the DOM)
  * '''Controller''' - the business logic behind views
  * '''Dependency Injection''' - Creates and wires objects and functions

== MVVM ==
 * https://angular.io/guide/template-syntax
In Angular (MVVM)(MVC)
 * the '''component''' plays the part of the '''controller  or viewmodel''', 
 * and the '''template''' represents the '''view'''.
 * The '''model''' represents the business model/domain model

Model–view–viewmodel is also referred to as model–view–binder, especially in implementations not involving the .NET platform

 * https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
MVVM facilitates a separation of development of the graphical user interface – be it via a markup language or GUI code – from development of the business logic or back-end logic (the data model). 

The view model of MVVM is a value converter,[1] meaning the view model is responsible for exposing (converting) the data objects from the model in such a way that objects are easily managed and presented.

View Model is a conversion of data from the Model to be used by the View. 

 * https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel#Components_of_MVVM_pattern
  * '''Model''':     Model refers either to a domain model, 
  * '''View''': structure, layout, and appearance of '''what a user sees''' on the screen. It displays a representation of the model and receives the user's interaction with the view and it forwards the handling of these to the '''view model''' via the data binding.
  * '''View Model''': abstraction of the view exposing public properties and commands. It has a binder, which automates communication between the view and its bound properties in the view model. The view model has been described as a state of the data in the model.

== Components ==

Components define views. Components use services, which provide specific functionality not directly related to views. Service providers can be injected into components as dependencies, making your code modular, reusable, and efficient.

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 in a target environment.

== Template ==
A template combines HTML with Angular markup that can modify HTML elements before they are displayed. Template directives provide program logic, and binding markup connects your application data and the DOM. There are two types of data binding: Event binding lets your app respond to user input in the target environment by updating your application data; Property binding lets you interpolate values that are computed from your application data into the HTML.

== Services, dependency injection ==
For data or logic that isn't associated with a specific view, and that you want to share across components, you create a service class. A service class definition is immediately preceded by the '''@Injectable()''' decorator. 

== Router - navigation ==
The Angular Router NgModule provides a service that lets you define a navigation path among the different application states and view hierarchies in your app

== Project structure ==
 * https://angular.io/guide/file-structure
ng new command creates a workspace. ng new <my-project>

== Run angular tests with code coverage ==
{{{#!highlight
ng test --codeCoverage=true --watch=false
}}}

== Karma jasmine show console.log() ==
In karma.conf
 * find client.jasmine.captureConsole
 * change it from false to true

== Example project ==
{{{#!highlight sh
ng new test-ng
cd test-ng/
ng build
ng serve
ng generate component abscomponent
ng generate component conccomponent
}}}

=== Structure without dist and node_modules ===
{{{
.
├── angular.json
├── browserslist
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── app
│   │   ├── abscomponent
│   │   │   ├── abscomponent.component.css
│   │   │   ├── abscomponent.component.html
│   │   │   ├── abscomponent.component.spec.ts
│   │   │   ├── abscomponent.component.ts
│   │   │   ├── tableheader.ts
│   │   │   ├── tablerow.ts
│   │   │   └── testdata.ts
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── conccomponent
│   │       ├── conccomponent.component.css
│   │       ├── conccomponent.component.html
│   │       ├── conccomponent.component.spec.ts
│   │       └── conccomponent.component.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json
}}}

=== app.component.html ===
Add conccomponent to app.component.html
{{{#!highlight xml
<div class="content" role="main">
  <app-conccomponent></app-conccomponent>
}}}

=== abscomponent.component.html ===
{{{#!highlight xml
<p>abscomponent works! {{message}}</p>

<div style="height: 100px; overflow-y: scroll;margin-bottom: 25px;">
    <table>
        <tr>
            <th *ngFor="let h of headers">{{h.name}}</th>
        </tr>
        <tr *ngFor="let row of rows">
            <td *ngFor="let value of row.values">
                {{value}}
            </td>
        </tr>
    </table>
</div>
}}}

=== abscomponent.component.ts ===
{{{#!highlight javascript
import { Component, OnInit, Input } from '@angular/core';
import { TestData } from './testdata';
import { TableHeader } from './tableheader';
import { TableRow } from './tablerow';

@Component({
  selector: 'app-abscomponent',
  templateUrl: './abscomponent.component.html',
  styleUrls: ['./abscomponent.component.css']
})
export abstract class AbscomponentComponent implements OnInit {

  @Input()
  message: string = "Message";

  items: TestData[];
  headers: TableHeader[];
  rows: TableRow[];

  constructor() {
    this.items = [];
    this.headers = [];
    this.rows = [];
  }

  ngOnInit(): void {
  }

  public configure(input: string, data: TestData[], header: TableHeader[], rows: TableRow[]): void {
    this.message = input;
    this.items = [];
    this.headers = [];
    this.rows = [];

    // on push detector
    data.forEach(element => {
      this.items.push(element);
    });

    header.forEach(element => {
      this.headers.push(element);
    });

    rows.forEach(element => {
      this.rows.push(element);
    });

    console.log("configure called");
  }
}
}}}

=== testdata.ts ===
{{{#!highlight javascript
export interface TestData {
    name: string;
}
}}}

=== tableheader.ts ===
{{{#!highlight javascript
export interface TableHeader {
    name: string;
}
}}}

=== tablerow.ts ===
{{{#!highlight javascript
export interface TableRow {
    values: string[];
}
}}}

=== conccomponent.component.ts ===
{{{#!highlight javascript
import { Component, OnInit } from '@angular/core';
import { AbscomponentComponent } from '../abscomponent/abscomponent.component';
import { TestData } from '../abscomponent/testdata';
import { TableHeader } from '../abscomponent/tableheader';
import { TableRow } from '../abscomponent/tablerow';

@Component({
  selector: 'app-conccomponent',
  templateUrl: '../abscomponent/abscomponent.component.html', //uses base class html
  styleUrls: ['../abscomponent/abscomponent.component.css']  // uses base class css
})
export class ConccomponentComponent extends AbscomponentComponent implements OnInit {

  constructor() {
    super();
  }

  ngOnInit(): void {
    let itemsx: TestData[];
    itemsx = [];
    itemsx.push({ name: "concrete" });
    itemsx.push({ name: "concreteaaa" });
    itemsx.push({ name: "asd" });
    let headers: TableHeader[];
    let rows: TableRow[];
    headers = [];
    headers.push({ name: "namea" });
    headers.push({ name: "nameb" });

    rows = [];
    rows.push({ values: ["x1", "y1"] });
    rows.push({ values: ["x2", "y2"] });
    rows.push({ values: ["x3", "y3"] });
    rows.push({ values: ["x4", "y4"] });
    rows.push({ values: ["x5", "y5"] });
    rows.push({ values: ["x6", "y6"] });
    rows.push({ values: ["x7", "y7"] });
    rows.push({ values: ["x8", "y8"] });
    this.configure(this.message + " extended !", itemsx, headers, rows);
  }

}
}}}


== Angular change detection ==
 * https://www.mokkapps.de/blog/the-last-guide-for-angular-change-detection-you-will-ever-need/
 * https://angular.io/api/core/ChangeDetectorRef

In short, the framework will trigger a change detection if one of the following events occurs:
 * any browser event (click, keyup, etc.)
 * setInterval() and setTimeout()
 * HTTP requests via XMLHttpRequest

{{{#!highlight javascript
constructor(private ref: ChangeDetectorRef) {
//...
}
this.ref.detectChanges(); // trigger detection change
}}}