Angular-BookMonkey

Links

• Angular
• Github-Quelle des Buchs

Schritte

ng new BookMonkey -p bm
# ... Angular routing: y
# Rest: leere Eingabe
npm install semantic-ui-css

• Änderung in angular.json:
  • projects -> BookMonkey -> architect -> build -> options -> styles:
  • projects -> BookMonkey -> architect -> test -> options -> styles:

  "styles": [
    "node_modules/semantic-ui-css/semantic.css"
  ],

• neues Interface

ng g interface shared/book
ng g component book-list
ng g component book-list-item

• Anpassungen in booklist.component.html
• Anpassungen in booklist.component.js
• Eintrag in app.component.html: <bm-book-list></bm-book-list>

Komponente

• Dekorator @Component
• Initialisierung nicht im Konstruktor, sondern in ngOnInit(): void(){}
• Alle Bausteine der Anwendung werden mittels @NgModule() in Angular-Modulen organisiert. Automatisch mit ng g component... erledigt in app.module.ts.
• Eine Komponte muss immer in declarations eines Moduls registriert werden. Automatisch mit ng g component... 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
• my-element Element mit Tag <my-element>
• [myAttr] Attribut, z.B.. <div myAttr="123"
• [myAttr=bar] Attribut, z.B.. <div myAttr="bar"
• .myClass Elemente mit CSS-Klasse myClass, z.B. <div class="myClass"

Konvention: möglichst nur Elementnamen verwenden

Property-Bindings

• Bringt Daten von der Komponente in Kindelemente im Komponentenbaum.

<my-component [property]="expression"></my-component>

• Datenänderung führt automatisch zu Anzeigeaktualisierung
• Auch beliebige Attribute im DOM-Baum sind ansprechbar:

const myImg = document.getElementById('myImg');
myImg.src = 'angular.src';
myImg.style.border = '1px solid black';

• HTML-Element ist konstanter Text, Dynamik wird durch Interpolation und die Property-Bindings erzeugt.
• Alternative Schreibweisen:

<!-- Interpolation -->
<element property="{{ expression }}"</element>
<!-- Textkonstante in Ticks einfügen: -->
<element [property]="'value'"></element>

Beispiele

<!-- 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>

Weitere Arten von Property-Bindings

• Attribute-Bindings: Setzen von Attributwerten [attr.colspan]

<td [attr.colspan]="myColSpan"></td>
<a [attr.role]="myRole>Link</a>

• Class-Bindings: Zuweisen von CSS-Klassen: [class.myCssClass], wenn Bedingung ("expression") true ist.
  • Alternative [ngClass], wenn mehrere gleichzeitig zugewiesen werden sollen.

<element [class.myClass]="hasMyClass"></element>
<div [ngClass]="[ active: isActive, 'has-error': hasError, disabled: isDisabled, myClass: hasMyClass }"></div>

• Style-Bindings: Hinzufügen von CSS-Stilen: [style.color]
  • Mehrere Zuweisungen mittels [ngStyle].

<! 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>

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).

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() { }
}

Event-Bindings

• Notation: DOM-Event in runde Klammern gesetzt:

<element> (myEvent)="myHandler()"></element>

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:

<input (keyup)="myKeyHandler($event)" type="text" />

@Component({...})

export class MyComponent {

myKeyHandler(e: KeyboardEvent) {
 console.log(e);
 }

}

Events selber definieren

• Verwenden des Dekorators @Output
• Auslösung durch emit(value)
• In Hauptkomponente einbinden

<event-component (fooEvent)="handleFoo"
</event-component>

Beispiel:

<button (click)="handleClick()">foo auslösen</button>

import { Component, EventEmitter, Output } from @angular/core;
@Component({ ... })
export class EventComponent {
  @Output() fooEvent = new EventEmitter<any>;
  handleClick() {
    this.fooEvent.emit();
  }
}