mobxjs / mobx-angular

The MobX connector for Angular.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

(Feature Request) Action wrapper in template

drowhunter opened this issue · comments

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

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