htlstp.if.scre

# Angular Components

---
#### Motivation
* Code -> Funktionen -> Klassen -> Packages -> ...

* 👍 Organisation, Maintainance, Testing, ...

* UI -> 🤔

---
#### Component
* Sichtbarer Teil des UIs (html, css)

* Inklusive dazugehöriger Logik (typescript)

![](./assets/ng-components/structure.png)

----
```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-some',
  templateUrl: './some.component.html',
  styleUrl: './some.component.css'
})
export class SomeComponent {
  // logic
}
```

Verwendung durch `selector` wie andere Tags

```html

@for(_ of [1, 2, 3]; track $index) {
  <app-some></app-some>
}
```

```css
app-some {
  border: 2px solid black;
}
```

----
#### Inline Templates

```typescript
@Component({
  selector: 'app-toggle',
  template: `<button (click)='toggle()'>Toggle</button>`,
  styleUrls: ['./toggle.component.css']
})
export class ToggleComponent {
  // logic
}
```

Für kleine Components

---
#### View Encapsulation

<ul>
    <li class="fragment">css gilt nur für die Component die es definiert</li>
    <li class="fragment"><code>/src/styles.css</code> gilt global</li>
    <li class="fragment">weitere globale müssen in <code>angular.json</code> konfiguriert werden</li>
</ul>

```json
"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
]
```

----
#### `:host`
```css
:host {
  display: block;
  background: dodgerblue;
  border: 2px solid black;
}
```

<ul>
    <li class="fragment">Selected das host-Element der Component</li>
    <li class="fragment"><code>display: inline</code> default, selten sinnvoll</li>
</ul>

note: html/css Standard fordert, dass unbekannte Tags inline dargestellt werden

---
#### Struktur
![](./assets/ng-components/amazon.png)

Wie unterteilen?

----
![](./assets/ng-components/amazon-structure.png)

---
#### Problem
![](./assets/ng-components/amazon-graph.svg)

<p class="fragment"><code>Results</code> und <code>Basket</code> brauchen die products</p>  
<p class="fragment">Wo speichern?</p>

----
#### `input()`
![](./assets/ng-components/amazon-graph-input.svg)

Parent -> Child

----
#### `input()`

```angular181html

<app-results [products]='results()' >
```

```typescript
@Component({...})
export class ResultsComponent {
  products  = input<Product[]>(); // read-only
  products2 = input<Product[]>([]); // default value
  products3 = input.required<Product[]>(); // required input   
}
```

----
#### `model()`
```typescript
class BasketComponent {
  basket = model<Product[]>(); // ModelSignal, writeable

clear() {
    this.basket.set([]);
  }
}
```

Two-Way Data Binding

```angular181html

<app-basket [(basket)]='basket' >
```

---
#### Problem
![](./assets/ng-components/amazon-graph.svg)

Add to basket - Button 🤔

----
#### `output()`

![](./assets/ng-components/amazon-graph-output.svg)

Child -> Parent

----
#### `output()`

```angular181html

@for(product of products(); track product.id) {
  <app-item (addToBasket)='addToBasket($event)' [product]='product'/>
}
```

```typescript
@Component({...})
class ItemComponent {
  product = input.required<Product>();
  addToBasket = output<Product>()

onButtonClicked() {
    this.addToBasket.emit(this.product());
  }
}
```

```text[1|2|3]
item.component.html    click 
item.component.ts      emit(product)
results.component.ts   addToBasket(product)
```

---
#### Lifecycle
![](./assets/ng-components/component-lifecycle.svg)

```typescript
@Component({...})
class SomeComponent implements OnChanges{
    
  ngOnChanges(changes: SimpleChanges) {
    // ...
  }
}
```