Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Dec 07 2018 12:25

    JohannesHoppe on master

    mergeMap async pipe (compare)

  • Dec 07 2018 08:59

    JohannesHoppe on master

    homework: real books thumbnails the snapshot failure routing: using observables and 1 more (compare)

  • Dec 07 2018 08:15

    JohannesHoppe on master

    simple routing (compare)

  • Dec 06 2018 15:57

    JohannesHoppe on master

    http (compare)

  • Dec 06 2018 14:23

    JohannesHoppe on master

    saving form values (compare)

  • Dec 06 2018 13:51

    JohannesHoppe on master

    form with validation (compare)

  • Dec 06 2018 10:59

    JohannesHoppe on master

    .gitignore (compare)

  • Dec 06 2018 10:57

    JohannesHoppe on master

    more intelliJ love @Pattn some e2e ❤️ (compare)

  • Dec 06 2018 10:38

    JohannesHoppe on master

    my first behaviour test fixture.debugElement (compare)

  • Dec 06 2018 08:54

    JohannesHoppe on master

    + Anzahl der Bücher showing stars ⭐️ (compare)

  • Dec 05 2018 15:10

    JohannesHoppe on master

    all tests green (compare)

  • Dec 05 2018 14:10

    JohannesHoppe on master

    sorting books (compare)

  • Dec 05 2018 09:10

    JohannesHoppe on master

    Hands-On `*ngFor` styling book-component with boo… refactoring to modules (compare)

  • Dec 05 2018 07:23

    JohannesHoppe on master

    styling boostrap with defaults showing a list of strings bookComponent (compare)

  • Dec 04 2018 14:04

    JohannesHoppe on master

    includes workshop-styles (compare)

  • Dec 04 2018 12:56

    JohannesHoppe on master

    polyfills for IE9 support small changes, new text (compare)

  • Dec 04 2018 12:24

    JohannesHoppe on master

    typescript playground hello webpack (compare)

  • Dec 04 2018 08:05

    JohannesHoppe on master

    ng new (compare)

  • Nov 23 2018 15:20

    JohannesHoppe on master

    Update README.md (compare)

  • Nov 23 2018 14:41

    JohannesHoppe on master

    Add Gitter badge Merge pull request #1 from gitt… (compare)

Johannes Hoppe
@JohannesHoppe
Johannes Hoppe
@JohannesHoppe
NGRX Starter
Johannes Hoppe
@JohannesHoppe
blownEye
@blownEye
Hallo @JohannesHoppe , letzte Woche im Workshop hast du erwähnt, dass wir die Folien auch herunterladen können. Wo genau können wir das machen? Danke im Voraus ;-)
GonzoBS
@GonzoBS
Die Folien werden an Virginia geschickt und dann an uns per Mail verteilt.
blownEye
@blownEye
@GonzoBS , danke! ;)
Übrigens, hier ist ein sehr coole video über SwitchMap ;-)
https://www.youtube.com/watch?v=rUZ9CjcaCEw
Johannes Hoppe
@JohannesHoppe
@blownEye @GonzoBS 🚀Das Abschlusspaket ist versendet! Vielen Dank für den tollen Workshop! 😃
LittleKita
@LittleKita
Hi, hab mal ne frage zur package-lock.json.
Dort steht als Abhängigkeit von @angular-devkit/build-angular "webpack-dev-server": "3.1.10" drinne.
Die Version 3.1.10 ist als high severity vulnerability markiert:
High Missing Origin Validation
Package webpack-dev-server
Patched in >=3.1.11
Kann ich die Abhängigkeit auf 3.1.11 setzen? Er scheint es immer wieder nach einem "npm install" zu reverten.
Ferdinand Malcher
@fmalcher
In der package.json von @angular-devkit/build-angular ist der webpack-dev-server auf die Version 3.1.10 festgesetzt, deshalb überschreibt ein npm install das auch immer wieder.
Praktisch ist der webpack-dev-server komplett ungefährlich, weil Du das Tool nur für ng serve auf deiner eigenen lokalen Maschine einsetzt. Die Vulnerability kannst Du also mehr oder weniger ignorieren. In der nächsten Version der Angular CLI bzw. angular-devkit wird das Ding bestimmt aktualisiert. @LittleKita
LittleKita
@LittleKita
Vielen Dank :) @fmalcher
LittleKita
@LittleKita
Hi, ich hab mal ne Frage zu Observable. Wenn ich mehrere Parallele Observable, habe ich nicht verstanden wie ich diese mergen kann. D.h. wenn alle fertig sind möchte ich das Ergebnis verarbeiten. Ich möchte sowas wie https://rxmarbles.com/#merge hinbekommen.
Ich habe eine asynchrone Methode zum hinzufügen von Büchern // public insertBook(book: Book): Observable<Book>;
wenn ich jetzt parallel Bücher hinzufüge:
const observables: Observable<Book>[] = [];
for (const book of books) {
  observables.push(this.service.insertBook(book));
}
wie kann ich diese verarbeiten, wenn alle Bücher verarbeitet wurden
LittleKita
@LittleKita
merge(...observables).subscribe((book: Book) => {
console.log(book);
}, null, () => {
console.log('All books finished');
});
Gibt es eventuell eine Methode statt Bücher einzeln gleich die Liste zu bekommen?
Ferdinand Malcher
@fmalcher
Dafür kannst Du die Funktion forkJoin() verwenden. Du gibst mehrere Observables hinein und das resultierende Observable feuert genau einmal, wenn alle Quellen completet haben – und gibt ein Array mit allen Ergebnissen zurück. @LittleKita
https://rxjs.dev/api/index/function/forkJoin
Den ganzen Aufruf kannst Du auch noch kürzer machen, um die for-Schleife und das zusätzliche Array zu sparen:
forkJoin(...books.map(book => this.service.insertBook(book)))
LittleKita
@LittleKita
Vielen Danke @fmalcher :)
LittleKita
@LittleKita
Hi, ich habe eine Komponente in der ich wiederum eine andere Komponente einbinde.
Im Moment fällt mir nur ein per @Input+EventEmitter zu kommunizieren. Am liebsten wäre es mir wenn ich direkt Methoden von dem Kind aufrufen könnte.
LittleKita
@LittleKita
Google ist mein Freund: @ViewChild('child')
child: ChildComponent;
Ferdinand Malcher
@fmalcher
Technisch geht das mit @ViewChild(), allerdings würde ich Dir nicht empfehlen, das zu machen. Mit Property Bindings und Event Bindings gibt es ja klar definierte Kommunikationswege und die sollten auch genutzt werden. Als Alternative zwei Vorschläge:
  • Event Bus: Du legst ein Subject in einen Service, schickst dort Events hin und empfängst die Events aus allen Komponenten, die sich dafür interessieren.
  • ngOnChanges: Wenn sich in einer Komponente ein @Input() ändert, dann wird der Lifecycle-Hook ngOnChanges() getriggert. Damit kannst Du auf Änderungen von außen reagieren.
LittleKita
@LittleKita
Danke für Antwort, vielleicht erkläre ich etwas genauer was ich machen will.
Ich wollte gerne eine Allgemeine Komponennte zur Abbildung von Bootstrap-Modal https://getbootstrap.com/docs/4.0/components/modal/
Ich wollte nur eine Komponente die ich überall dort einbinde wo ich sie brauche.
<div><-- Hauptkomponennte <cc-overview>-->

<cc-popup #popup>
   Hier kommt der Popup-Content rein.
</cc-popup>

<button (click)="someFunction()">Klickmich</button>

</div>

...
export class OverviewComponent implements OnInit {
...

  @ViewChild('popup')
  popup: PopupComponent;

  someFunction(): void {
...
    popup.show();
...
  }
}
In der cc-popup gibt es dann nur die Methoden show/hide.
LittleKita
@LittleKita

Hi, ich mal wieder ;)
ich verwende:

import { Location } from '@angular/common';
...
location.back()

Für einen Zurück-Button, beim klick navigiert er dann auf die vorherige Seite.

Wenn es aber keine Vorherige Seite gibt, kann ich da irgendwie eine andere Seite aufrufen?
Johannes Hoppe
@JohannesHoppe
@LittleKita
die Erwartung bei einer klassischen website ist folgendes, du klickst 2 Links
Seite A --> Seite B --> Seite A
jetzt kannst du auch 2x zurück gehen, in deiner History. das bedeutet, man erwartet einen neuen History-Eintrag bei einem klick auf einen "zurück" button
daher würde ich auch bei einer SPA nicht für den user location.back() ausführen. das kann er selber machen.
daher solltest du per code fest vorgeben, was die "zurück" seite ist
LittleKita
@LittleKita
Hi, danke für die Antwort hatte lange nicht reingeschaut ;) Das Problem in meinem Fall war: Wenn ein neues Buch angelegt wird, soll er nach dem Speichern oder Abbrechen auf die Vorherige Seite gehen. Nun hatte ich aber den Browser geschlossen und neu geöffnet so war er immer noch auf der Bucherstellen-Seite konnte aber nicht zurück gehen da die History verloren gegangen ist :(
Wenn ich selber definiere auf welche Seite er kommt habe ich folgendes Verhalten "Startseite" -> "Buchübersicht" -> "Bucherstellen"(Speichern) -> "Buchübersicht". Klickt der Anwender im Browser auf Zurück kommt er wieder zum "Bucherstellen". Er müsste erst mehrmals im Browser auf Zurück klicken damit er wieder z.B. zur Startseite kommt.
Ich habe es jetzt aber so umgesetzt wie du auch vorgeschlagen hattest, ist einfach die Sicherste Methode :)

LittleKita
@LittleKita
Ich Beschäftige mich gerade ein wenig mit den Karma Tests. Ich hatte sowas wie in der Art Mockito gesucht um Komponente zu Mocken.
Ich wollte nicht "NO_ERRORS_SCHEMA" nehmen da so eventuell Schema-Fehler nicht auffallen bzw. wenn sich eine Komponente ändert, kann der Test trotzdem noch erfolgreich sein.
Auch wollte ich nicht jedesmal in den Test die zu mockenen Komponente schreiben, da ich dort jeden Input/Output... auch noch definieren muss.
Da hab ich etwas gesucht und ngMocks und shallow-render gefunden. Habt ihr damit eventuell schon Erfahrungen oder vielleicht etwas ganz anderes?