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

Challenges faced when integrating Angular with Bootstrap elements

Using styled-components and typescript to override props

The term "define" is not recognized when constructing a Next.js application

Avoiding loading certain images within an *ngFor loop

Angular 2 encountered a fatal error: Issues with parsing the template:

Struggling to implement JSS hover functionality in a project using React, Typescript, and Material UI

Input a value to request in the Mssql node

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Prepare fixtures for commands in Cypress before executing the hook

Tips for managing the data type of a bound value through ngModel: preventing number distortion to string

The menu's mouseover event is activated when hovering over the inner element

Can you explain how NGXS store manages its data storage? Is there a memory limit set for the NGXS store? And where exactly is the NGXS store memory located within the browser

RTK update mutation: updating data efficiently without the need to refresh the page

Tips for relocating the indicators of a react-material-ui-carousel

The TypeScript compiler is indicating that the Observable HttpEvent cannot be assigned to the type Observable

I am unable to link to 'dataSource' because it is not a recognized property of 'table'

"Acquiring the version number in Angular 5: A step-by-step

Angular - A simple way to conceal a specific row in a mat-table using Angular

Is there a way to adjust the opacity of a background image within a div?

When the button is clicked, (ngSubmit) will be triggered