mobxjs / mobx-angular

The MobX connector for Angular.
MIT License
483 stars 59 forks source link

(Feature Request) Action wrapper in template #143

Open drowhunter opened 3 years ago

drowhunter commented 3 years ago

So in mobx you can wrap anythin in an action wrapper , since actions are needed to modify state. I have the following code

<input [(ngModel)]="mystore.foo>

since its a two way binding in strict mode it complains

what I am wondering is could you add a feature so that i could do this.

<input [(ngModel)]="action(() => myStore.foo)

I'm aware of the workaround to this. `<input [ngModel]="myStore.foo" (ngModelChange)="setMyStore($event)">/input>

setMyStore(val:string){ this.myStore.setFoo(val) //action for setting }

Is there a feature to be able to do an in-template action wrapper

drowhunter commented 3 years ago

So I found another solution to this problem but its not ideal

Instead of splitting the the [(ngModel)] binding into [ngModel] (ngModelChange)

I did this

export class MyStore implements OnInit {
  constructor() {
     makeAutoObservable(this)
  }

  private _foo: string = ''

  get foo (): string {
    return this._searchText
  }

  set foo(text: string) {
    this._foo = text
  }
}

<input [(ngModel)]="mystore.foo">

This seems to automatically make the set foo into an @action. I'm guessing the get foo is turned into a @computed

still being able to wrap the variable in an action in the template would be a simpler solution