Utilizing Angular signals to facilitate data sharing among child components

Question

Utilizing Angular signals to facilitate data sharing among child components

I have a main component X with two sub-components Y and Z. I am experimenting with signals in Angular 17. My query is how can I pass the value of a signal from sub-component Y to sub-component Z?

I have attempted the following approach which works initially, but fails to update when the signal's value changes.

subComponentY.component.ts

 export const data = signal<any>('');

 fetchData() {

    this.loading = true;
    
    const functions = getFunctions(getApp());
    connectFunctionsEmulator(functions, 'localhost', 5001);

    const getInfo = httpsCallable(functions, 'getInformation')
    getInfo(this.url.value)
    .then( (result: any) => {
      // result.data returns an object
      data.set(result.data);
      console.log(data());
    })
  }

subComponentZ.component.ts

import { data } from '../subComponentY/subComponentY.component';

data_ = data;

subComponentZ.component.html

<p class="">{{data_().data.title}}</p>

Although the console displays the updated signal data, the HTML template does not reflect these changes. Any suggestions?

angular typescript

Answer 1

Answer №1

You have the option to utilize it as an @Input, see the functional example provided below!

parent

import { CommonModule } from '@angular/common';
import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { TestComponent } from './test/test.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, TestComponent],
  template: `
    <app-test [item]="item"></app-test>
  `,
})
export class App {
  item = signal<any>('');

  ngOnInit() {
    this.retrieveFileInformation();
  }

  retrieveFileInformation() {
    // this.loading = true;

    // const functions = getFunctions(getApp());
    // connectFunctionsEmulator(functions, 'localhost', 5001);

    // const getInfo = httpsCallable(functions, 'getInformation')
    // getInfo(this.url.value)
    // .then( (result: any) => {
    // result.data return object
    // mock the API call!
    this.item.set({ data: { title: 'hello!' } });
    setTimeout(() => {
      this.item.set({ data: { title: 'hello world!' } });
    }, 2000);
    console.log(this.item());
    // })
  }
}

bootstrapApplication(App);

child

import { CommonModule } from '@angular/common';
import { Component, Input, OnInit, Signal } from '@angular/core';

@Component({
  selector: 'app-test',
  imports: [CommonModule],
  template: `
    <p class="">{{ item()?.data?.title | json }}</p>

  `,
  standalone: true,
})
export class TestComponent implements OnInit {
  @Input() item!: Signal<any>;
  constructor() {}

  ngOnInit() {}
}

Check out the StackBlitz demo here!

Answer 2

You have the option to utilize it as an @Input, see the functional example provided below!

parent

import { CommonModule } from '@angular/common';
import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { TestComponent } from './test/test.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, TestComponent],
  template: `
    <app-test [item]="item"></app-test>
  `,
})
export class App {
  item = signal<any>('');

  ngOnInit() {
    this.retrieveFileInformation();
  }

  retrieveFileInformation() {
    // this.loading = true;

    // const functions = getFunctions(getApp());
    // connectFunctionsEmulator(functions, 'localhost', 5001);

    // const getInfo = httpsCallable(functions, 'getInformation')
    // getInfo(this.url.value)
    // .then( (result: any) => {
    // result.data return object
    // mock the API call!
    this.item.set({ data: { title: 'hello!' } });
    setTimeout(() => {
      this.item.set({ data: { title: 'hello world!' } });
    }, 2000);
    console.log(this.item());
    // })
  }
}

bootstrapApplication(App);

child

import { CommonModule } from '@angular/common';
import { Component, Input, OnInit, Signal } from '@angular/core';

@Component({
  selector: 'app-test',
  imports: [CommonModule],
  template: `
    <p class="">{{ item()?.data?.title | json }}</p>

  `,
  standalone: true,
})
export class TestComponent implements OnInit {
  @Input() item!: Signal<any>;
  constructor() {}

  ngOnInit() {}
}

Check out the StackBlitz demo here!

Answer 3

Answer №2

Avoid using @inputs for signals in your components. Signals are most powerful when used for cross-component communication, rather than just establishing parent-child relationships.

To prevent unnecessary updates and potential issues, consider creating a service to share the signal between components instead.

Answer 4

Avoid using @inputs for signals in your components. Signals are most powerful when used for cross-component communication, rather than just establishing parent-child relationships.

To prevent unnecessary updates and potential issues, consider creating a service to share the signal between components instead.

Utilizing Angular signals to facilitate data sharing among child components

Answer №1

Answer №2

Similar questions

Issue with ngSubmit not being triggered in Angular Reactive Form

Angular: InjectionToken for service injection causes issue

Tips on sending a list via @Input using Angular5

Incorrect tsx date interpretation when dealing with years such as 0022

What is the best RxJS operator to implement additional transformations following mapping?

The error occurred while using NPM watch: ReferenceError: The variable "_" is not recognized in the file "../node_modules/angular-google-maps/dist/angular-google-maps.js" at line 1, column 1 (

Having trouble loading static files in Django Angular framework? Specifically, images stored in the assets folder returning a

What events can cause all store states to be loaded when the page is altered?

What is the method for utilizing an alias at the top within a subquery?

What is the best way to remove all attributes from one interface when comparing to another?

Troubleshooting the issue of the Delete Service not functioning properly within Angular

Tips for differentiating between elements with identical values in an HTML datalist using Angular

Adding a dynamic CSS stylesheet at runtime with the power of Angular and Ionic 2

Retrieving the selected date from mat-datepicker into a FormControl

Extract the value from an array of objects

Organize the attributes of components on the following line in Visual Studio Code

How can certain properties be mandated while still permitting additional ones?

A TypeScript array interface featuring an indexed structure along with the ability to access custom properties through string keys

Converting JSX files to TSX files: a step-by-step guide

making GET and POST requests within a single function using Angular 2