Is it possible to achieve two-way data binding across various components in Angular 2?

Question

Is it possible to achieve two-way data binding across various components in Angular 2?

Currently, I am facing an issue with two components in my Angular project - HomePageComponent and StudentResultsComponent. The problem arises when I type something in the input field of HomePageComponent; the value is not updating in the StudentResultsComponent as expected.

I initially considered creating a separate component for the input and then calling it in both components to resolve the issue. However, even after implementing this approach, the value was still not being updated in the StudentResultsComponent while typing in HomePageComponent.

Here is a snippet of my code:

Career-Search-Component.html

<input
  #input
  type        ="text"
  id          ="searchInput"
  class       ="input-student-search validate filter-input"
  placeholder ="Search by a career (Software Engineer,Web Developer,Geologist, Geogropher etc.)"
  [(ngModel)] ="query"
>

Career-Search.component.ts

import {Component,OnInit,Input,EventEmitter} from '@angular/core';
@Component({
  selector: 'career-search',
  templateUrl: 'career-search.component.html'
})
export class CareerSearchComponent implements OnInit {
  @Input() public query: string;
  constructor() {}

  ngOnInit() {}

}

HomePageComponent.component.html

<career-search></career-search>
<button class="submit" [routerLink]="['/students']">Search</button>

Students-result.component.html

<career-search></career-search>

The primary reason behind passing data from the homepage component is so that I can utilize this data for querying and displaying results based on the values obtained from the other component.

Your assistance in resolving this issue would be greatly appreciated.

Thank you.

angular typescript data-binding angular2-components angular2-inputs

Answer 1

Answer №1

If your components are not directly connected, one way to establish communication between them is by using a service. The link shared by AJT_82 provides an example of this approach. Here is a more simplified version:

import {Component, Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class InputService {

  public inputEvents: EventEmitter<string> = new EventEmitter();

  public inputChanged(val: string) {
    this.inputEvents.emit(val);
  }
}

@Component({
  selector: 'observer',
  template: `
    <p>Input value: {{ myValue }}</p>
`
})
export class ObserverComponent implements OnDestroy {

  private myValue: string;
  private subscription: Subscription;

  constructor(private service: InputService) {
    this.subscription = this.service.inputEvents.subscribe((newValue) => {
      this.myValue = newValue;
    })
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'observable',
  template: `
    <input [(ngModel)]="inputValue" />
`
})
export class ObservableComponent {

  private _inputValue: string;

  constructor(private service: InputService) {}

  public get inputValue(): string {
    return this._inputValue;
  }

  public set inputValue(val: string) {
    this._inputValue = val;
    this.service.inputChanged(val);
  }
}

@Component({
  selector: 'app-root',
  template: `

    <observable></observable>
    <observer></observer>

`
})
export class AppComponent {
}

Explanation:

The Observable Component uses two-way data binding to store the input value. When the value changes, it notifies the Input Service using its setter method. The service then emits an event, which the Observer Component subscribes to and updates its own value accordingly.

Answer 2

If your components are not directly connected, one way to establish communication between them is by using a service. The link shared by AJT_82 provides an example of this approach. Here is a more simplified version:

import {Component, Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class InputService {

  public inputEvents: EventEmitter<string> = new EventEmitter();

  public inputChanged(val: string) {
    this.inputEvents.emit(val);
  }
}

@Component({
  selector: 'observer',
  template: `
    <p>Input value: {{ myValue }}</p>
`
})
export class ObserverComponent implements OnDestroy {

  private myValue: string;
  private subscription: Subscription;

  constructor(private service: InputService) {
    this.subscription = this.service.inputEvents.subscribe((newValue) => {
      this.myValue = newValue;
    })
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

@Component({
  selector: 'observable',
  template: `
    <input [(ngModel)]="inputValue" />
`
})
export class ObservableComponent {

  private _inputValue: string;

  constructor(private service: InputService) {}

  public get inputValue(): string {
    return this._inputValue;
  }

  public set inputValue(val: string) {
    this._inputValue = val;
    this.service.inputChanged(val);
  }
}

@Component({
  selector: 'app-root',
  template: `

    <observable></observable>
    <observer></observer>

`
})
export class AppComponent {
}

Explanation:

The Observable Component uses two-way data binding to store the input value. When the value changes, it notifies the Input Service using its setter method. The service then emits an event, which the Observer Component subscribes to and updates its own value accordingly.

Is it possible to achieve two-way data binding across various components in Angular 2?

Answer №1

Similar questions

Steps for utilizing a Get() method to view a response within Angular

Unable to assign dynamic key to Vue 3 directive for object property

Can Typescript Be Integrated into an AngularJS Application?

After inputting new values, the table is not allowing me to update it

Angular 2 component downgrade issue: What causes the error when constructor parameters are involved? (SystemJS) Unable to resolve all parameters for (?)

What is the best way to transition from using merge in a pipe in v5 to v6?

Is there a way to update JSON data through a post request without it getting added to the existing data?

.net 6 Attribute routes resulting in a 404 error response

Data is not displaying correctly in the Angular Material Table

Eliminating an item from an array with the help of React hooks (useState)

Dependencies of generic types among function arguments

The comparison operator '>' is invalid when used with a boolean and a number

Issue with displaying MP4 movies in Angular

What is the best way to bring attention to a field that is outside the current viewport?

Angular - Execute function every 30 seconds while considering the duration of the function execution

The Angular material checkbox has a mind of its own, deciding to uncheck

Tips for ensuring the correct typing of a "handler" search for a "dispatcher" style function

The component is not responding to list scrolling

The type of 'username' cannot be determined without specifying the reference to '@angular/forms/forms' in the node modules

Angular 12 web version displays error message: "404 not found" for the requested URL