Implementing bidirectional data binding individually within Angular

Question

Implementing bidirectional data binding individually within Angular

My custom table component requires a model for row selection actions that can be two-way bound in the following way:

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

Alternatively, I have the option to pass an item through one-way data binding if I do not need to track changes made to that model:

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

If I prefer not to bind the data item two-ways and instead want to pass it down via one-way data binding along with a handler/event emitter, the syntax would look something like this:

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

Is it possible to achieve this functionality with minimal or no changes to the my-table component? Or do I need to create an @Output parameter on the my-table component in order to utilize handleSelectedChanged($event)?

Thank you!

javascript angular typescript

Answer 1

Answer №1

No need to make any changes within the my-table component table. Just remember, when you want a custom event to be emitted, use (selectedChange) instead of (selected). That's all there is to it. Make sure you have already set up the Input binding for selected and the Output binding for selectedChange somewhere within the my-table component. Keep in mind that using selected change property binding is optional.

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

If you're curious about why two-way binding requires the Change suffix on the event, it's because of the design. For a clearer understanding, take a look at Angular's ngModel directive as well.

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

This code snippet can also be written as

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

Answer 2

No need to make any changes within the my-table component table. Just remember, when you want a custom event to be emitted, use (selectedChange) instead of (selected). That's all there is to it. Make sure you have already set up the Input binding for selected and the Output binding for selectedChange somewhere within the my-table component. Keep in mind that using selected change property binding is optional.

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

If you're curious about why two-way binding requires the Change suffix on the event, it's because of the design. For a clearer understanding, take a look at Angular's ngModel directive as well.

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

This code snippet can also be written as

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

Answer 3

Answer №2

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)
}

Answer 4

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)
}

Answer 5

Answer №3

Your my-table.component.ts already has an implementation of both @Input() and @Output() using selected and selectedChange().

For custom two-way data binding in Angular, the event emitter and variable should be defined as follows:

@Input() date: Date;

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

By using [(date)], a two-way data binding is created.

If you prefer not to use two-way data binding, you can omit the () in [(date)] and simply use

[date]</code; it will function as normal parent-child component communication.</p>

<p>To listen for changes and perform actions based on the value of <code>date

, use the (dateChange) event emitter and bind it to a function to monitor changes.

In response to your question about creating a new @Output() in

my-table.component.ts</code, there is no need to create or add any additional event emitters. The functionality is already implemented through <code>selectedChange()

. Simply include:

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

Now, with selectedRows as input and selectedChange as output emitting an event whenever there are changes in selected, the event will be passed through handleSelectedChanged().

Answer 6

Your my-table.component.ts already has an implementation of both @Input() and @Output() using selected and selectedChange().

For custom two-way data binding in Angular, the event emitter and variable should be defined as follows:

@Input() date: Date;

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

By using [(date)], a two-way data binding is created.

If you prefer not to use two-way data binding, you can omit the () in [(date)] and simply use

[date]</code; it will function as normal parent-child component communication.</p>

<p>To listen for changes and perform actions based on the value of <code>date

, use the (dateChange) event emitter and bind it to a function to monitor changes.

In response to your question about creating a new @Output() in

my-table.component.ts</code, there is no need to create or add any additional event emitters. The functionality is already implemented through <code>selectedChange()

. Simply include:

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

Now, with selectedRows as input and selectedChange as output emitting an event whenever there are changes in selected, the event will be passed through handleSelectedChanged().

Implementing bidirectional data binding individually within Angular

Answer №1

Answer №2

parent.component.html

parent.component.ts

my-table.component.ts

user.service.ts

my-table.component.ts

parent.component.html

parent.componnet.ts

Answer №3

Similar questions

Is there a way to change the names of bundles created during ng serve in Angular 13?

What are the steps to verify a query's accuracy and effectively manage any errors that may arise

Troubleshooting issues with debouncing a Redux dispatch and encountering unexpected results

The jQuery function creating an object that calls itself as a method

Can a Typescript type alias be altered in real time?

Emphasizes the P tag by incorporating forward and backward navigation options

Combining Elasticsearch with AngularJS or Node.js

Passing all selected items from a list to the controller

Exploring Angular 7's Child Routes

What is the best way to include the existing query string value in the hyperlinks on my page?

I am having trouble getting Mongoose to perform operations on my data

What could be causing a momentary 404 error when I click on a next.js `Link` that connects to an API endpoint before redirecting to the intended page?

Fixes the React bug that removes only the last item in a list

Is it appropriate to incorporate existing cshtml markup from MVC into Angular 6?

Converting Angular App's local storage from synchronous to asynchronous with Indexed-db

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

JavaScript is currently only being applied to sort the first table

What is required to run npm rebuild node-sass --force following each instance of a `yarn add` command?

Issue with ThreeJS CSG when trying to intersect extruded geometries

When using the e.target.getAttribute() method in React, custom attributes may not be successfully retrieved