CODEWITHSUNDEEP
angular
Mikael
Mikael

Reputation: 1309

Data binding with not nested components

I have some component with checkboxes. And I have another component with table. The components are not one inside another. When I uncheck checkbox I need to change classes to some table columns on table component. What is the best way to do it ?

Upvotes: 0

Views: 93

Answers (2)

Barremian
Barremian

Reputation: 31105

From your comment, both the components are used in app.component.html. Then you can create an event emitter for the change event in the check-box component. And in the app.component.html, assign a template variable to table component and assign any of it's function directly as callback for checkbox component's emitted event. Try the following

checkbox.component.html

<input type="checkbox" id="1" (change)="change.emit($event)"> Checkbox

checkbox.component.ts

@Output change = new EventEmitter();

app.component.html

<app-checkbox (change)="table1.checkboxChange($event)"></app-checkbox>
<app-table #table1></app-table>

table.component.ts

checkboxChange(event: any) {
  // change CSS selector of element
}

One advantage of this method is the parent component remains untouched and so an additional rerouting is avoided.

Upvotes: 0

saidutt
saidutt

Reputation: 289

In angular most of the communication happens in the following ways.

  1. PARENT -> CHILD , use Input EventEmitter.
  2. CHILD -> PARENT, use Output EventEmitter.
  3. If no immediate relation between components -> Use a Data Service, angular service which both the components are dependent on to publish and retrieve data.
  4. Also you can use the ViewChild, if your child component is housed inside the parent component.

Upvotes: 1

Related Questions