udemy.angular/docs/component_databinding.md

# Component and databining

## Overview

<img src="../img/property_event-binding_overview.png" alt="overview" width="800"/>

## Binding to custom property

Exposing the property to be bindable from outside of it's component. Downwords to a Child Component

<img src="../img/input_decorator.png" alt="overview" width="600"/>

Assigning an alias to be more specific on the outside.
```ts
@Input('srvElement') element: {type: string, name: string, content: string}
```

Uses in the HTML:
```html
<app-server-element>
    [srvElement]="serverElement"
</app-server-element>
```

## Binding to custom eventNames

Passing data from the Child to the Parent Component.

Add event listener to the implementing parent component:
```html
<app-cockpit (serverCreated="onServerCreated($element)")></app-cockpit>
```

`EventEmitter` is a function to emit custom events.

cockpit.component.ts
```ts
import { Component, OnInit, EventEmitter, Output,  } from '@angular/core';

@Component({
  selector: 'app-cockpit',
  templateUrl: './cockpit.component.html',
  styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
  @Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>();
  @Output('bpCreated') blueprintCreated = new EventEmitter<{serverName: string, serverContent: string}>();
  newServerName = '';
  newServerContent = '';

  constructor() { }

  ngOnInit() {
  }

  onAddServer(nameInput: HTMLInputElement) {
    this.serverCreated.emit({
      serverName: this.newServerName,
      serverContent: this.newServerContent
    });
  }

  onAddBlueprint(nameInput: HTMLInputElement) {
    this.blueprintCreated.emit({
      serverName: newServerName,
      serverContent: this.newServerContent
    });
  }

}
```

app.component.html
```html
<div class="container">
  <app-cockpit
    (serverCreated)="onServerAdded($event)"
    (blueprintCreated)="onBlueprintAdded($event)"
  ></app-cockpit>
  <hr>
  <div class="row">
    <div class="col-xs-12">
      <app-server-element
        *ngFor="let serverElement of serverElements"
        [srvElement]="serverElement">
      </app-server-element>
    </div>
  </div>
</div>
```

> Cockpit is the parent element, so it sends out data or event, thats why the `@Output` decorator.
> 
> ServerElement is the Child element, so it receive data in, thats why the `@Input` decorator

## Locale Reference

The locale references can put on any element in the html template.
```html
#nameOfTheReference
```

It holds the whole element, not only the values. This can be used **only** in the *template* **not** in the *TS-file*. But it can be passed as an argument in the TS-file.

## @ViewChild

It can also be able to get data with the `@ViewChild` decorator.

```ts
import { Component, OnInit, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
...
export class CockpitComponent implements OnInit {
    ...
    @ViewChild('serverContentInput', { static: false }) serverContentInput: ElementRef;
```

> `serverContentInput` is the name of the locale reference in the html template.

Twho-way-binding is not anymore required.

> It is not adviced to set a value with this method.

## ng-content

This directive can be used to project the content of the DOM, which would be lost when placed in the opening and closing tags of the element in the template. This behavior is called `hoock`.

## lifecycle

ngOnInit is a lifecycle hook.

The application can hook into this hooks to execute some actions.

| Hook                  | Description                                                                |
| --------------------- | -------------------------------------------------------------------------- |
| ngOnChanges           | Called after a bound input property changes                                |
| ngOnInit              | Called once the component is initialized (will runn after the constructor) |
| ngDoCheck             | Called during every change detection run                                   |
| ngAfterContentInit    | Called after content (ng-content) has been projected into view             |
| ngAfterContentChecked | Called every time the projected content has been checked                   |
| ngAfterViewInit       | Called after the component’s view (and child views) has been initialized   |
| ngAfterViewChecked    | Called every time the view (and child views) have been checked             |
| ngOnDestroy           | Called once the component is about to be destroyed                         |