CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

04 September, 2023

Call component method when service's signal updates

 Programing Coderfunda     September 04, 2023     No comments   

Let me preface this question with the fact that I started learning Angular about a month ago. Basically, I have a searchbar component and several different itemcontainer components (each of them displays a different type of item). In an attempt to have access to the serchbar value on any component, I created a searchbarService like so: import { Injectable, signal, WritableSignal } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class SearchBarService { searchTextSignal: WritableSignal = signal(''); setSearch(text: string): void{ this.searchTextSignal.set(text); } } The searchbar component calls the setSearch method on input submit. So far so good. Now, the problem comes when trying to work with searchTextSignal on the itemcontainter components. I'm trying to use it like this: import { Component, signal} from '@angular/core'; import { Factura } from 'src/app/interfaces/factura'; import { FacturaService } from 'src/app/services/factura.service'; //gets items from a placeholder array. import { SearchBarService } from 'src/app/services/search-bar.service'; @Component({ selector: 'vista-facturas', templateUrl: './vista-facturas.component.html', styleUrls: ['./vista-facturas.component.css'] }) export class VistaFacturasComponent { facturasArray: Factura[] = []; // has all items filteredFacturasArray = signal([]); // has all filtered items, and is the value that I want to get updated when the signal changes. constructor(private facturaService: FacturaService, public searchBarService: SearchBarService) { } getFacturas(): void { //initializes the arrays. this.facturaService.getFacturas().subscribe(facturasReturned => this.facturasArray = facturasReturned); this.filteredFacturasArray.set(this.facturasArray); } filterFacturas(): void{ // this method is likely the problem let text = this.searchBarService.searchTextSignal(); if (!text) this.filteredFacturasArray.set(this.facturasArray); this.filteredFacturasArray.set(this.facturasArray.filter(factura => factura?.numero.toString().includes(text))); } ngOnInit(): void { this.getFacturas(); } } The templace uses ngFor like so: So, everything boils down to how to make VistaFacturasComponent call filterFacturas() when searchBarService.searchTextSignal() updates. Any ideas?
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Writing and debugging Eloquent queries with Tinkerwell
    In this article, let's look into the options that you can use with Tinkerwell to write and debug Eloquent queries easier. The post Wr...
  • The token request was rejected by the remote server
    error:invalid_granterror_description:The token request was rejected by the remote server.error_uri: https://documentation.openiddict.com/err...
  • Vue.js Tutorial
      Vue.js Installation Compatibility Check Before going to install and use Vue.js in your project, you should check the compatibility issues....
  • JqueryUI Tutorial
    JqueryUI Tutorial    JqueryUI is the most popular front end frameworks currently. It is sleek, intuitive, and powerful mobile first fr...
  • Laravel - Application Structure
    The application structure in Laravel is basically the structure of folders, sub-folders and files included in a project. Once we create a ...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (69)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • July (4)
  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

Loading...

Laravel News

Loading...

Copyright © CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda