Angular 17: Signals (Part 2)

Angular 17: Signals (Part 2) — Inputs, Outputs, Models and Effects

Hi everyone! Welcome to Angular 17: Signals (Part 2). If you missed Part 1, you can catch up here: Angular 17: Signals (Part 1)?—?Signals Basics.

Overview:

• Passing data from parent to a child component using input signal.
• Sending events to the parent component using output signal.
• Write values back to parent’s property (two-way binding) using model signal.
• Perform an action when signals change using an effect.

Input Signals:

input signals allow parent components pass data to child components. This data can be changed during the lifecycle of the child component, and the child can use this read-only input signal and access its data normally.

input signals can be optional or required. Code example (inside component.ts file):

// Optional - undefined is default value
name = input<string>();

// Required - value must be provided
height = input.required<number>();        

Inputs can be aliased to modify their default names to something else. Code example (inside component.ts file):

name = input<string | undefined>(undefined, { alias: 'firstName' });        

Getting the value of an input signal is done in the same as for any other signal. For more information and code examples, please refer to the following section: #Getting signal value | Angular 17: Signals (Part 1)

Value Transforms:

Sometime we needed to modify the raw input values. In those cases, providing a transform function can convert the original value from parent. Note: Transforms function need to be pure functions, meaning they always output the same value for the same input. Code example (inside component.ts file):

// The input can accept either a string or a number,
// and it will converts to a number
height = input.required({transform: (val: number | string) => +val});        

Output Signals:

Outputs are like outgoing communication channels that allow child components to send data to their parent components, and the parent components can listen to it.

Code example (inside child component.ts file):

nameChange = output<string>();

setName(name: string) {
    this.nameachange.emit(name);
}        

Code example (inside parent component.html file):

<child (nameChange)="onNameChange($event)" />        

Outputs can be aliased to modify their default names to something else. Code example (inside child component.ts file):

nameChange = output<string>({alias: "firstNameChange"});        

Note: It’s possible to subscribe outputs such as rxjs observables.

Effects:

An effect is an operation that runs whenever one or more signal values change. This means that if you have an effect that depends on a signal, it will automatically run whenever that signal changes.

Code example (inside component.ts file):

private readonly matSnackBar = inject(MatSnackBar);
private readonly errorMessage = signal<string>('');

constructor() {
  effect(() => {
    const errorMessage = this.errorMessage();
    if (errorMessage) {
      this.matSnackBar.open(errorMessage);
    }
  });
}        

Effects always run at least once. This means that when you create an effect, it will run immediately. Effects run separately during the change detection process, not blocking the main flow.

Common use cases for effects:

• Tracking data with a logging tool, analytics tool, or another tool.
• Keep your app data and window.localStorage data synchronized.
• DOM interactions that can’t be done within Angular’s template syntax.
• Custom rendering to a <canvas> or other third-party UI library.

Effects are automatically destroyed when their containing context (such as a component, directive, service, etc.) is destroyed.

Common pitfalls:

• Effect function runs repeatedly due to circular updates operation.
• Using effect instead of computed signal to compute a value.

What next?

I will talk about integration with rxjs (Observables) using rxjs-interop package, and creating custom signals.

Goodbye everyone!

Same article in Medium.com website:

https://medium.com/@ovadya.shachar/angular-17-signals-part-2-3c26dc4a85ca