Simple Angular Service using signals

Joshua Daza Rincon — Wed, 15 Nov 2023 04:30:34 +0000

Related to Angular 17th launching I try to learn how works signals. So check how to share data between 2 components.

Firstable this example use standAlone components but the workflow is very similar compared with previous versions.

Create a service with data attribute (assigning the signal) with a number value. and set 2 methods to manage signal value.

store.ts

import { Injectable, signal } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class Store {

  private data = signal(0);

  setDataSignal(val: number) {
    this.data.set(val);
  }

  get DataSignal() {
    return this.data();
  }
}

Consuming signal between components...

Now in main (standAlone component) using a constructor make an instance from Store to local store attribute. Then create a get returning the signal value executed.

main.ts

import 'zone.js';
import { Component, OnInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { Store } from '../store/store';
import { HeaderComponent } from './components/header/header.component';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './main.html',
  imports: [HeaderComponent],
})
export class App {

  constructor(private store: Store) {}

  get dataValue() {
    return this.store.dataSignal;
  }
}

bootstrapApplication(App);

In signals the expression require an execution to listen global state. It can be from service or component, for this example from service

I prefer avoid to write html code in main.ts component to keep all separated and more readable but if you prefer just replace templateUrl: './main.html' with template: '<h2>This is main with Data {{dataValue}}</h2>'.

main.html

<section>
  <h2>This is main with Data {{dataValue}}</h2>
</section>

Second Component

Create a header component on this path components/header as a traditional angular component.

header.ts

import { Component } from '@angular/core';
import { Store } from '../../../store/store';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  standalone: true,
})
export class HeaderComponent {
  constructor(private store: Store) {}

  get dataValue() {
    return this.store.Data;
  }

  changeData(e: any) {
    this.store.setData(e);
  }
}

to get dataValue is the same approach but to change data create changeData method to pass the new value.

header.html

<header>
  Header Component with DataValue: <strong>{{ dataValue }}</strong> <br />
  <button (click)="changeData(dataValue + 2)">change data</button>
</header>

Using (click) directive set new value adding a number to the current dataValue. That trigger a new value listened globally for all components.

Conclusion

That new way to share data is more simple to write and read, signals definitely does not replace the previous way since
RxJS has a huge range of operators and features but is a huge beginning...

Github code

Forem: Joshua Daza Rincon

Simple Angular Service using signals

Consuming signal between components...

Second Component

Conclusion