angularangular-signalsangular-output

Angular @ouput a values when a signal change

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

Solution

  • 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>