= Angular =
 * https://angular.io/guide/architecture
Angular is a platform and framework for building single-page client applications 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, the component plays the part of the controller/viewmodel, and the template represents the view.

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>

== Example project ==
 * ng new test-ng
 * cd test-ng/
 * ng build
 * ng serve
 * ng generate component abscomponent
 * ng generate component conccomponent

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

=== abscomponent.component.html ===
{{{
<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 ===
{{{
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");
  }
}
}}}