Separate two-way data binding in Angular

user_3413536 0
Viewed 2354

I have a custom table component that expects a model for some row selection actions that can be two-way bound like so:

<my-table [(selected)]="selectedRows"></my-table>

Optionally, I can also simply pass an item via one-way data binding if I don't care about the changes that happen to that model:

<my-table [selected]="selectedRows"></my-table>

If I want to not have a two-way bound data item, and instead want to have a data item I pass down to the table component via one-way data binding, and a handler/event emitter so that the syntax ends up not to different than this:

<my-table [selected]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>

Is it possible with no, or minimal changes to the my-table component? Or do I have to create an @Output parameter on the my-table component to which I pass handleSelectedChanged($event)?

Thank you!

angular typescript javascript
3 Answers

No you don't need to do any changes inside the my-table component table. Only when you want to use custom event to be emitted use (selectedChange) instead of (selected) that's it. I hope you already had Input binding selected and Output binding selectedChange in a place inside my-table component. Also selected change property binding is completely optional.

<my-table 
  [selected]="selectedRows" 
  (selectedChange)="handleSelectedChanged($event)">
</my-table>

If you're wondering how two way binding stuff needed to have Change suffix on event, because that's by design. For understanding it more clearly you can have a look at angular ngModel directive as well.

<input [ngModel]="myModel" (ngModelChange)="myModel = $event" />
// You can also do assignment by calling function
<input [ngModel]="myModel" (ngModelChange)="inpuChanged($event)" />

can be written as 

<input [(ngModel)]="myModel" />
user_24354730

parent.component.html

<my-table [selected2]="selectedRows" (selected)="handleSelectedChanged($event)"></my-table>

parent.component.ts

handleSelectedChanged(event){
    // console.log(event)
      this.selectedRows = event
    }

my-table.component.ts

@Input() selected2: any;
@Output() selected: EventEmitter<any> = new EventEmitter();

OnCLCICK(){
 this.selected.emit({'key':'value'})
}

or :--

user.service.ts

@Output() selected: EventEmitter<any> = new EventEmitter();

 setselected(data) {
 this.selected.emit(data);
}

getselected() {
        return this.selected;
      }

my-table.component.ts

@Input() selected2: any;

constructor(
public user: Userservice
){
}

 onclick(){
this.user.setselected({'key','val'})
}

parent.component.html

<my-table [selected2]="selectedRows"></my-table>

parent.componnet.ts

    constructor(
    public user: Userservice
    ){
    }

ngOnInit(){
this.userService.getselected().subscribe((data) => {
      this.getData(data);
    });
}

getData(data){
console.log(data)
}
user_88647280

Your my-table.component.ts already has an @Input() and @Output() implemented i.e through selected and selectedChange() .

For a custom two way data binding , angular expects the event emitter and the variable to be something like this :

@Input() date : date ;

@Output() dateChange : EventEmitter<Date> = new EventEmitter<Date>();

So when you use [(date)] , you have a two way data binding created .

if you don't want to use two way data binding you can omit the () in the [(date)] and just use [date] , and it will still behave like a normal parent child component communication .

If you want to listen to the changes and do some action to the date variable value , then you can use (dateChange) event emitter and bind it with a function so that you can listen for the changes .

Now to answer your question whether you have to create a new @Output() in my-table.component.ts , well you don't have to create any thing or add any event emitters to bind your handleSelectedChanged($event) as an Event Emitter is implemented through selectedChange() . All you have to do now is :

<my-table [selected]="selectedRows" (selectedChange)='handleSelectedChanged($event)'></my-table>

So now you have selectedRows as an input and selectedChange as an output that emits an event if anything changes in selected and the event is passed through handleSelectedChanged() .

user_69492350
Related