Replies: 20 comments 1 reply
-
|
dpunkt.plus – E-Books zum gedruckten Buch: |
Beta Was this translation helpful? Give feedback.
-
|
Google JavaScript Style Guide: https://google.github.io/styleguide/jsguide.html |
Beta Was this translation helpful? Give feedback.
-
|
Repo als ZIP herunterladen mit der Kommandozeile in den Ordner navigieren |
Beta Was this translation helpful? Give feedback.
-
|
@if (book) {
<div class="card mb-4">
<div class="card-body bg-light">
<img class="img-thumbnail float-end" alt=""
src="https://api.angular.schule/avatar/{{ book.rating }}">
<div class="card-title">
<h2>
{{ book.title }}
<span class="badge bg-secondary">{{ book.rating }}</span>
</h2>
</div>
<p>{{ book.description }}</p>
<p>Preis: {{ book.price }}</p>
</div>
</div>
} |
Beta Was this translation helpful? Give feedback.
-
Freiwillige Hausaufgabe (1)
|
Beta Was this translation helpful? Give feedback.
-
useDefineForClassFieldsAngular-Buch Seite 851 oder https://angular-buch.com/blog/2022-11-use-define-for-class-fields TypeScript und JavaScript verhalten sich unterschiedlich bei der Initialisierung von Klassen-Propertys. class Customer {
// HIER werden Propertys verwendet, die erst im Constructor bereitgestellt werden
age = this.currentYear - this.birthYear;
constructor(private currentYear: number, private birthYear: number) {
console.log('AGE', this.age);
}
}Dieser Code funktioniert in TypeScript, allerdings nicht in JavaScript. Für Dependency Injection bedeutet das: Wenn wir einen injizierten Service bei der Initialisierung unserer Propertys verwenden wollen, müssen wir export class MyComponent {
private myService = inject(MyService);
myData$ = this.myService.getData();
}Folgendes funktioniert NICHT, wenn export class MyComponent {
myData$ = this.myService.getData();
constructor(private myService: MyService) {}
} |
Beta Was this translation helpful? Give feedback.
-
|
Verschachtelte Objekte klonen mit Spread Operator: const myObj = {
title: 'Angular',
author: {
firstname: 'F',
lastname: 'M'
}
}
const myCopy = {
...myObj,
author: {
...myObj.author,
firstname: 'L'
}
};
// echte Deep Copy
const myCopy2 = structuredClone(myObj);
myCopy2.author.firstname = 'L'; |
Beta Was this translation helpful? Give feedback.
-
Freiwillige Hausaufgabe (2)Deaktiviere die Buttons in der |
Beta Was this translation helpful? Give feedback.
-
|
Projekt mit vielen nützlichen Pipes: |
Beta Was this translation helpful? Give feedback.
-
Freiwillige Hausaufgabe (3)
|
Beta Was this translation helpful? Give feedback.
-
|
falsy: false, null, undefined, NaN, 0, '' (leerer String) |
Beta Was this translation helpful? Give feedback.
-
Vorarbeit für Formulare und SucheFür die nächsten Übungen ist etwas Vorarbeit nötig. Wir benötigen neue Routen und Komponenten.
|
Beta Was this translation helpful? Give feedback.
-
Freiwillige Hausaufgabe (4)
|
Beta Was this translation helpful? Give feedback.
-
🎮 RxJS Playground installierenDu kannst dir entweder
cd rxjs-playground
npm install
ng serveÖffne den Browser unter der URL http://localhost:4300 (!), um die Anwendung zu sehen. |
Beta Was this translation helpful? Give feedback.
-
|
Direktive für Datumsfelder: |
Beta Was this translation helpful? Give feedback.
-
Hausaufgabe (5)Lies dir das Handout und die Folien zu RxJS in Ruhe durch (siehe Portalseite) und schau dir die vergangenen Übungen im Playground noch einmal an. Bringe morgen deine Fragen mit! 🙂 |
Beta Was this translation helpful? Give feedback.
-
Typeahead-SucheImplementiere eine Typeahead-Suche. Nutze als Basis dafür den Datenstrom
|
Beta Was this translation helpful? Give feedback.
-
|
Zeit bis 11:25 Uhr |
Beta Was this translation helpful? Give feedback.
-
|
NgRx einrichten – heute ausnahmsweise mit ng add @ngrx/store@next
ng add @ngrx/store-devtools@next
ng add @ngrx/effects@next
ng add @ngrx/schematics@nextng g feature books/store/book --api --entity=false --defaultsRedux DevTools (Browser-Extension): |
Beta Was this translation helpful? Give feedback.
-
ZusatzaufgabenRxJS PlaygroundHier gibt es noch die offenen Aufgaben "Chat" und "Dragdrop". Die Lösung für das Dragdrop findet ihr im Repo. Refactoring des bestehenden FormularsTeile das Formular zum Erstellen von Büchern in zwei Komponenten auf. Das reine Formular soll in einer eigenen neuen Komponente liegen, z. B. Bücher bearbeiten
|
Beta Was this translation helpful? Give feedback.
-
Hier können wir während des Workshops Links und Codeschnipsel teilen.
Beta Was this translation helpful? Give feedback.
All reactions