What is the best way to @output the value of a variable with angular signal ?

Let say we have the following

$foo = signal<string>('')

@Output() fooChanged: EventEmitter<string> = new EventEmitter<string(this.$foo())

1. effect: My first though would have been to use effect but as I read it, it should kind of being avoided if possible.

2. computed: I would love to use it, but I don't know how to implement it properly

What is the best way to @output the value of a variable with angular signal ?

Let say we have the following

$foo = signal<string>('')

@Output() fooChanged: EventEmitter<string> = new EventEmitter<string(this.$foo())

1. effect: My first though would have been to use effect but as I read it, it should kind of being avoided if possible.

2. computed: I would love to use it, but I don't know how to implement it properly

• angular
• angular-signals
• angular-output

• Check out Output Signals and Model Signals and ignore the event emitter in this case. – Thomas Renger Commented Mar 9 at 11:34
• @ThomasRenger I would have loved todo it, but I cannot find the proper document, as least I don't see it here: angular.dev/guide/signals – Raphaël Balet Commented Mar 9 at 12:11
• Here you are: angular.dev/api/core/output this is very similar to the old stuff. The model combines the "old" input / output pair into one model: angular.dev/api/core/model ... so if foo depends on the parent component i would use model ... if not i would use output. And when to trigger depends on the usecase. in the past angular said that effect should not effect the application state (i guess because of a potential loop) but if there are many places in you code manipulating the foo signal i would use effect. – Thomas Renger Commented Mar 9 at 13:02
• i fortunately i dont know a way to create output from signal and i dont to if using the rxjs interopt functions are a good way to fill this: readonly fooChanged = outputFromObservable(toObservable(this.foo$)) – Thomas Renger Commented Mar 9 at 13:05
• @ThomasRenger Maybe for a practical example, here I'd like to change the countryChanged when the $selectedCountry have changed. If I understand correctly effect is the way to go, and angular does not have a better way to go ? : github/rbalet/ngx-mat-input-tel/blob/main/projects/… – Raphaël Balet Commented Mar 9 at 14:11

1 Answer 1

Looks like you want to do two way data binding, then just use a model signal.

@Component({ selector:'test' ... })
export class Test component {
  $foo = model<string>('');
}

Now you can use this in two ways.

Directly bind the property using two way data binding.

<test [($foo)]="fooParent"></test>

Or if you want to call an event you can use the change suffix syntax like so

<test [$foo]="fooParent" ($fooChange)="fooChangeEvent($event)"></test>