Angular: Managing changes in child component fields

Question

Angular: Managing changes in child component fields

I have integrated a child component in my Angular application which contains two Boolean fields. I aim to respond promptly in the parent component whenever these values change.

///////////////////////////////////////////////////////
// Child Component
///////////////////////////////////////////////////////
@Component({
  selector: 'critical',
  template: `<div class="blueBorder"><h1>This is a critical component</h1></div>`,
  styles: [`h1 { font-family: Lato; } .blueBorder {border: 1px solid blue;}`],
})
export class CriticalComponent {
  error: boolean = false;
  warning: boolean = false;
}

///////////////////////////////////////////////////////
// Parent Component
///////////////////////////////////////////////////////
@Component({
  selector: 'my-app',
  template: '<critical #criticalCmp></critical>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('criticalCmp') criticalCmp: CriticalComponent;

  onErrorsOrWarningsInCriticalComponent(): void {
    // Execute this method each time the values in the critical-component are updated
    // Perform API calls, log information, or other actions here
  }
}

How can I achieve this functionality?

To demonstrate, you can view a StackBlitz example here: https://stackblitz.com/edit/angular-ivy-hpn8qy?file=src/app/app.component.ts

angular typescript

Answer 1

Answer №1

Utilizing a setter in conjunction with an Output is one way to achieve the desired functionality.

Parent Component:

import { Component, ViewChild } from '@angular/core';
import { CriticalComponent } from './critical.component';

@Component({
  selector: 'my-app',
  template: '<critical #criticalCmp (errorChanged)="errorChanged($event)"></critical>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('criticalCmp') criticalCmp: CriticalComponent;

  onErrorsOrWarningsInCriticalComponent(): void {
    // This method will be triggered whenever there are changes in the critical-component
    // Perform actions like calling services, logging, etc. here
  }

  errorChanged(isError: boolean) {
    if(isError){
      this.onErrorsOrWarningsInCriticalComponent();
    }
  }
}

Child Component:

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

@Component({
  selector: 'critical',
  template: `<div class="blueBorder"><h1>This is a critical component</h1></div>`,
  styles: [`h1 { font-family: Lato; } .blueBorder {border: 1px solid blue;}`],
})
export class CriticalComponent {
  @Output() 
  errorChanged = new EventEmitter();
  set error(val: boolean) {
    this._error = val;
    this.errorChanged.next(val);
  };
  get error() {
    return this._error;
  }
  warning: boolean = false;

  private _error: boolean = false;
}

Effective communication between components can be achieved through various methods, for further reference check out the Angular documentation: https://angular.io/guide/component-interaction

Answer 2

Utilizing a setter in conjunction with an Output is one way to achieve the desired functionality.

Parent Component:

import { Component, ViewChild } from '@angular/core';
import { CriticalComponent } from './critical.component';

@Component({
  selector: 'my-app',
  template: '<critical #criticalCmp (errorChanged)="errorChanged($event)"></critical>',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('criticalCmp') criticalCmp: CriticalComponent;

  onErrorsOrWarningsInCriticalComponent(): void {
    // This method will be triggered whenever there are changes in the critical-component
    // Perform actions like calling services, logging, etc. here
  }

  errorChanged(isError: boolean) {
    if(isError){
      this.onErrorsOrWarningsInCriticalComponent();
    }
  }
}

Child Component:

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

@Component({
  selector: 'critical',
  template: `<div class="blueBorder"><h1>This is a critical component</h1></div>`,
  styles: [`h1 { font-family: Lato; } .blueBorder {border: 1px solid blue;}`],
})
export class CriticalComponent {
  @Output() 
  errorChanged = new EventEmitter();
  set error(val: boolean) {
    this._error = val;
    this.errorChanged.next(val);
  };
  get error() {
    return this._error;
  }
  warning: boolean = false;

  private _error: boolean = false;
}

Effective communication between components can be achieved through various methods, for further reference check out the Angular documentation: https://angular.io/guide/component-interaction

Answer 3

Answer №2

If you're looking to take a proactive approach using Observables, here's a suggestion.

Create two BehaviorSubjects named error and warning, and set their initial values like this:

error = new BehaviorSubject(false);
warning = new BehaviorSubject(false);

Combine them using combineLatest with @Output() to trigger emissions when the values change:

@Output() myBooleans = combineLatest({
  error: this.error.asObservable(),
  warning: this.warning.asObservable(),
}).pipe(skip(1));

To ignore the initial emission, I'm using skip(1).

The parent component can listen for changes in these values:

<critical (myBooleans)="onErrorsOrWarningsInCriticalComponent($event)"></critical>

When you need to update either value in the child component, simply call: this.error.next() or this.warning.next().

I also recommend creating an interface for this object to properly type your data.

You can find the solution implemented in this STACKBLITZ link.

Answer 4

If you're looking to take a proactive approach using Observables, here's a suggestion.

Create two BehaviorSubjects named error and warning, and set their initial values like this:

error = new BehaviorSubject(false);
warning = new BehaviorSubject(false);

Combine them using combineLatest with @Output() to trigger emissions when the values change:

@Output() myBooleans = combineLatest({
  error: this.error.asObservable(),
  warning: this.warning.asObservable(),
}).pipe(skip(1));

To ignore the initial emission, I'm using skip(1).

The parent component can listen for changes in these values:

<critical (myBooleans)="onErrorsOrWarningsInCriticalComponent($event)"></critical>

When you need to update either value in the child component, simply call: this.error.next() or this.warning.next().

I also recommend creating an interface for this object to properly type your data.

You can find the solution implemented in this STACKBLITZ link.

Angular: Managing changes in child component fields

Answer №1

Answer №2

Similar questions

Node's TypeScript parser loses the order of same name-tags when converting XML to JSON

Why are the icon pictures not displaying in Angular's mat-icon-button?

Exploring the use of static properties in JSDoc Classes

Can a universal type be designed for application across various types?

Calculating the total sum of values within a JSON array

What method does Angular use to distinguish between familiar elements and unfamiliar ones?

A guide on implementing a universal service to seamlessly incorporate jQuery datatable across all pages in an Angular application

Creating a collapsible sidebar feature in Angular 2

Leveraging information within Typescript and Angular

The error message "Cannot redeclare block-scoped variable 'tz'" is shown when trying to use Ionic 2 along with angular-moment-timezone

What steps can be taken to ensure that only users with "admin" status have the ability to edit certain data within a Firebase document?

What is the process of defining an object enum in a declarations document?

Bringing in a TypeScript module to an Angular component

Updating the value of a variable in Angular2 as you slide an HTML slider

Issue with routerLink not activating properly when used within ngFor directive

Experimenting with Cesium using Jasmine (Angular TypeScript)

Why ngModel Behaves Oddly in Angular 2

Utilizing Angular's Module Federation with Webpack to address duplication in Reactive Forms FormControl

What is the correct way to effectively produce a detailed post template?

Alert: Prop type validation error: The `component` prop provided to `ForwardRef(Link)` is invalid