Bearbeiten von „Angular-BookMonkey“

= Links =
* [[Angular]]
* [https://github.com/Kylonas/BookMonkey Github-Quelle des Buchs]

= Schritte =
<source lang="bash">ng new BookMonkey -p bm
# ... Angular routing: y
# Rest: leere Eingabe
npm install semantic-ui-css
</source>

* Änderung in angular.json:
**  projects -> BookMonkey -> architect -> build -> options -> styles: 
**  projects -> BookMonkey -> architect -> test -> options -> styles: 
<pre>
  "styles": [
    "node_modules/semantic-ui-css/semantic.css"
  ],
</pre>
* neues Interface
<source lang="bash">ng g interface shared/book
ng g component book-list
ng g component book-list-item
</source>

* Anpassungen in booklist.component.html
* Anpassungen in booklist.component.js
* Eintrag in app.component.html: <code><bm-book-list></bm-book-list></code>
== Komponente ==
* Dekorator @Component
* Initialisierung nicht im Konstruktor, sondern in <code>ngOnInit(): void(){}</code>
* Alle Bausteine der Anwendung werden mittels <code>@NgModule()</code> in Angular-Modulen organisiert. Automatisch mit <code>ng g component...</code> erledigt in app.module.ts.
* Eine Komponte muss immer in ''declarations'' eines Moduls registriert werden. Automatisch mit <code>ng g component...</code> erledigt.
* Verschachtelung von Komponenten über (CSS-)Selektor.
=== Selektoren ===
* div.active Div-Element mit CSS-Klasse active
* input[type=text] Eingabefeld vom Typ Text
* li:nth-child(2) jedes zweite Listenelement innerhalb des Elternelements <code><li></code>
* my-element Element mit Tag <code><my-element></code>
* [myAttr] Attribut, z.B.. <code><div myAttr="123"</div></code>
* [myAttr=bar] Attribut, z.B.. <code><div myAttr="bar"</div></code>
* .myClass Elemente mit CSS-Klasse myClass, z.B. <code><div class="myClass"</div></code>
'''Konvention''': möglichst nur Elementnamen verwenden

== Property-Bindings ==
* Bringt Daten von der Komponente in Kindelemente im Komponentenbaum.
<pre><my-component [property]="expression"></my-component>
</pre>
* Datenänderung führt automatisch zu Anzeigeaktualisierung
* Auch beliebige Attribute im DOM-Baum sind ansprechbar:
<source lang="ts">const myImg = document.getElementById('myImg');
myImg.src = 'angular.src';
myImg.style.border = '1px solid black';
</source>
* HTML-Element ist konstanter Text, Dynamik wird durch Interpolation und die Property-Bindings erzeugt.
* Alternative Schreibweisen:
<pre><!-- Interpolation -->
<element property="{{ expression }}"</element>
<!-- Textkonstante in Ticks einfügen: -->
<element [property]="'value'"></element>
</pre>
=== Beispiele ===
<pre><!-- URL und Title werden aus der Komponente x.myUrl bzw. x.myTitle genommen -->
<img [src]="myUrl" [title]="myTitle" />
<button [disabled]="isDisabled">Do it</button>
<p [textContent]="'DubuDubuDuu'"></p>
<my-component [foo]="1+1"></my-component>
</pre>
=== Weitere Arten von Property-Bindings ===
* Attribute-Bindings: Setzen von Attributwerten <code>[attr.colspan]</code>
<pre><td [attr.colspan]="myColSpan"></td>
<a [attr.role]="myRole>Link</a>
</pre>
* Class-Bindings: Zuweisen von CSS-Klassen: <code>[class.myCssClass]</code>, wenn Bedingung ("expression") true ist.
** Alternative <code>[ngClass]</code>, wenn mehrere gleichzeitig zugewiesen werden sollen.
<pre><element [class.myClass]="hasMyClass"></element>
<div [ngClass]="[ active: isActive, 'has-error': hasError, disabled: isDisabled, myClass: hasMyClass }"></div>
</pre>
* Style-Bindings: Hinzufügen von CSS-Stilen: <code>[style.color]</code>
** Mehrere Zuweisungen mittels <code>[ngStyle]</code>.
<pre><! Achtung, funktioniert nicht, da aus Sicherheitsgründen verboten: -->
<element style="color: {{ myColor }}"></element>
<element [style.color="myColor"></element>
<div [ngStyle]="{ 'color': myColor, 'padding': '10px' }"></div>
<div [ngStyle]="myStyles"></div>
</pre>
== Rückfluss DOM-Property in Komponente ==
* Import von angular/core
* Dekorator @Input() bzw. @Input('domProperty') ('''nicht empfohlen''').
* Bei Fehler "has no initializer and is not definitely assigned in the constructor": undefined zulassen (! nach dem Variablennamen).
<source lange="ts">import { component, Input } from '@angular/core';
@Component({
  selector: 'my-component';
templateUrl: './my.compoent.html';
})
export class MyComponent {
  @Input() domProperty!: string;
  @Input('domProperty') myProperty: string;
  constructor() { }
}
</source>

== Event-Bindings ==
* Notation: DOM-Event in runde Klammern gesetzt:
<pre><element> (myEvent)="myHandler()"></element>
</pre>
=== Events ===
Die Namen der Angular-Events sind nicht die DOM-Namen, z.B. "click" statt "onClick"
* click: einfacher Mausklick
* change: Ändern eines Werts in Formularfeld
* dblclick: Doppelklick
* keyup: Taste wird losgelassen
* focus: Feld bekommt den Fokus (Maus oder Tastatur)
* blur: Feld verliert den Fokus
* keydown: Taste wird gedrückt
* mouseover: Maus wird auf Element bewegt
* moseout: Maus verlässt Element
* contextmenu: Aufruf des Kontextmenüs
* select: Auswahl von Text
* copy, past: Text kopieren oder einfügen
* submit: Formular wird abgeschickt

Beispiel:
<pre><input (keyup)="myKeyHandler($event)" type="text" />
</pre>@Component({...})
export class MyComponent {
 myKeyHandler(e: KeyboardEvent) {
  console.log(e);
  }
}
</pre>
=== Events selber definieren ===
* Verwenden des Dekorators @Output
* Auslösung durch <code>emit(value)</code>
* In Hauptkomponente einbinden
<pre><event-component (fooEvent)="handleFoo"
</event-component>
</pre>

Beispiel:
<pre><button (click)="handleClick()">foo auslösen</button>
</pre>
<pre>import { Component, EventEmitter, Output } from @angular/core;
@Component({ ... })
export class EventComponent {
  @Output() fooEvent = new EventEmitter<any>;
  handleClick() {
    this.fooEvent.emit();
  }
}
</pre>