Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Signal-Based Data Fetching With the New httpRes...

Signal-Based Data Fetching With the New httpResource

Manfred Steyer

March 28, 2025
Tweet

More Decks by Manfred Steyer

Other Decks in Programming

Transcript

  1. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 5 1)

    Signal Graph 2) Resource API 3) DEMO 4) Signal Graph in Demo 5) Live Coding Agenda
  2. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 6 About

    Me (Remote) Angular Workshops and Consulting Google Developer Expert for Angular Blog, Books, Articles, and Talks about Angular Manfred Steyer, ANGULARarchitects.io
  3. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 8 Building

    Your Reactive Graph desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
  4. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 9 Building

    Your Reactive Graph desserts = signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings()));
  5. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten desserts =

    signal<Dessert[]>([]); ratings = signal<DessertIdToRatingMap>({}); ratedDesserts = computed(() => this.toRated(this.desserts(), this.ratings())); 10 Building Your Reactive Graph originalName = signal(''); englishName = signal(''); Load Desserts
  6. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 12 Resource

    API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } });
  7. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 13 Resource

    API dessertsResource = resource({ request: this.dessertsCriteria, loader: (param) => { return this.#dessertService.findPromise(param.request); } }); dessertsCriteria = computed(() => ({ originalName: this.originalName(), englishName: this.englishName(), })); desserts = this.dessertsResource.value; ratedDesserts = computed(() => this.toRated(this.desserts, …));
  8. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 14 httpResource

    dessertsResource = httpResource(() => ({ url: 'http://demo.angulararchitects.io/...', params: { originalName: this.originalName(), englishName: this.englishName(), } })); desserts = this.dessertsResource.value; ratedDesserts = computed(() => this.toRated(this.desserts, …));
  9. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 17 canvas

    (view child) style levelKey animation levelResource tilesMapResource tilesResoure tilesMapProgress render (effect) levelOverview Resource
  10. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 21 1)

    Build a reactive graph 2) httpResource: fetching data within the graph 3) Service: creating httpResource Conclusion
  11. • Textmasterformat bearbeiten • Zweite Ebene Mastertextformat bearbeiten 23 [Social

    Media] Manfred Steyer [web] ANGULARarchitects.io Manfred Steyer @ Manfred Steyer Slides & Examples Remote Company Workshops and Consulting http://angulararchitects.io