htlstp.if.scre

# Angular Basics

---
#### Motivation
* State Change ⟹ UI Change

* Viel js

* Viel overhead

* js 😕

----
#### Frameworks
![](./assets/ng-basics/angular-logo.png)

![](./assets/ng-basics/react-logo.png)

![](./assets/ng-basics/vue-logo.png)

---
#### Konfiguration
<dl>
    <div class="fragment fade-in-then-semi-out">
    <dt>package.json</dt>
    <dd>Scripts, dependencies</dd>
    </div>
    <div class="fragment fade-in-then-semi-out">
    <dt>tsconfig.json</dt>
    <dd>TypeScript-Compiler</dd>
    </div>
    <div class="fragment fade-in-then-semi-out">
    <dt>angular.json</dt>
    <dd>Angular</dd>
    </div>
    <div class="fragment fade-in-then-semi-out">
    <dt>app.config.ts</dt>
    <dd>App</dd>
    </div>
</dl>

<p class="fragment fade-in">In den Übungen ✅</p>

----
#### `index.html`
```angular181html
<!doctype html>
<html lang='en'>
<head>
    ...
</head>
<body>
  <app-root></app-root>
</body>
</html>
```

`+ *.ts $\rightarrow$ Compiler $\rightarrow$`

```html
<body>
    <app-root></app-root>
    <script src='some.js' type='module'></script>
    <script src='main.js' type='module'></script>
</body>
```

----
#### `app-root`

![](/assets/ng-basics/app.component.png)

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
    // code goes here
}
```

---
#### String Interpolation

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
    displayedVariable = signal(42);
    valueJustForTs = 'ok';
}
```

```angular181html
<p> {{ displayedVariable() }} </p>    ==> <p>42</p>
```

```typescript
this.displayedVariable.set(3)         ==> <p>3</p>
```

---
#### Event Binding
```html
<button (click)='foo()'></button>
```

```typescript
@Component({ ... })
export class AppComponent {
  n = signal(42);
  
  foo() {
    if (this.n() < 100)
      this.n.set(this.n() + 1);
    else
      this.n.update(value => value - 1)
    console.log(this.n())
  }
}
```

----
#### Events
```angular181html
(click)='foo()'
(dblclick)='foo()'
(focus)='foo()'
(blur)='foo()'
(keydown.enter)='foo()'
(mouseenter)='foo($event)'
(keydown)='foo($event)'
```

`$event` enthält Informationen über das Event

* Welche Taste

* Input

* Maustaste

* Koordinaten

* ...

---
#### Property Binding
```typescript
url = signal('some-url');
```

```html
<img src='url()'>
```

<img src='#' class="fragment">

```html
<img src='{{ url() }}'>
```

```html
<img [src]='url()'>
```

<ul>
    <li class="fragment"><code>property</code> vs <code>[property]</code> 🤔</li>
    <li class="fragment">Intellisense 👍</li>
</ul>

----
#### Styling
```angular181html
<p [class.hidden]='error()'>Error!</p>
```

```text
if error():
  give the <hidden> class
```

```html
<p [style.display]='error() ? "none" : "block"'>Error!</p>
```

mehrere

```angular181html
<p [ngClass]='{"hidden": error(), "huge": aria()}'>Error!</p>
```

```text
if error():
  give the <hidden> class
if aria():
  give the <huge> class
```

---
#### Two-Way-Binding
<input value=16 style="height:2em" class="fragment">

```typescript
age = signal(16);
```

```angular181html
<input [(ngModel)]='age' >
```

keine `()`, wir wollen nicht nur den Wert

---
#### Cheat Sheet
```angular181html
{{ interpolation() }}
<button (click)='action($event)' >Event Binding</button>
<a [href]='url()' >Property Binding</a>
<input [(ngModel)]='twoWay' >
```