====== Angular Docs Getting Started ======

===== What is Angular? =====

https://angular.io/guide/what-is-angular#what-is-angular

Angular is a development platform based on TypeScript. It includes:
  * component-based framework
  * libraries, which covers a variety of features like routing, forms management etc.
  * developer tools

==== Angular applications: The essentials ====

=== Components ===

A Component includes a TypeScript class with:
  * @Component() decorator
  * HTML-template
  * styles


=== Templates ===

The HTML template declares how the component should be rendered. It can be done inline or by file path.

Inline:
<code>
@Component ({
  selector: 'hello-world',
  template: `<p>{{message}}</p>`
})
</code>

By file path:
<code>
@Component ({
  selector: 'hello-world',
  templateUrl: './hello-world-interpolation.component.html'
})
</code>


  * Double curly braces ( ''{{}}'' )
    * indicate that the value should be interpolated


  * Property binding ( ''[]'' )
    * sets values for properties and attribute of HTML elements

The following examples illustrates how the HTML attribute ''style.color'' can be bound to the TypeScript variable ''fontColor'' from the component class.
<code>
<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>
</code>

**Event listeners** can be declared with the help of parentheses:
<code>
<button
  type="button"
  [disabled]="!canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>
</code>

The event listener calls the method ''sayMessage()'' which is defined in the component class.


**Directives** can be used to add features to the templates. For example:
  * *ngIf
  * *ngFor
It is also possible to declare own custom directives.

=== Dependency Injection ===

  * in the class which should be injected
    * ''@Injectable'' declaration
  * in the class which uses the injected functionality
    * import
      * e.g. ''import { Logger } from '../logger.service';''
    * variable which uses the injected class 
      * e.g. 
        * declaration:
          * ''constructor(private logger: Logger) { }''
        * and then using:
          * ''this.logger.writeCount(this.count)''


==== Angular CLI ====

  * ''ng build'' -> Compiles an Angular application into an output directory.
  * ''ng serve'' -> Builds and serves your application, rebuilding on file changes.
  * ''ng generate'' -> Generates or modifies files based on a schematic.
  * ''ng test'' -> Runs unit tests on a given project.
  * ''ng e2e'' -> Builds and serves an Angular application, then runs end-to-end tests.


==== First-party libraries ====
  * Angular Router -> Advanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more.
  * Angular Forms -> Uniform system for form participation and validation.
  * Angular HttpClient -> Robust HTTP client that can power more advanced client-server communication.
  * Angular Animations -> Rich system for driving animations based on application state.
  * Angular PWA -> Tools for building Progressive Web Applications (PWA) including a service worker and Web application manifest.
  * Angular Schematics -> Automated scaffolding, refactoring, and update tools that simplify development at large scale.

===== Try it =====
  * Getting started
    * ...
  * Adding navigation
    * ...
  * Managing data
    * ...
  * Using forms for user input
    * ...
  * Deploying an application
    * ...

===== Setup =====
...