Youngster listens for guardian's occurrence in Angular 2

Question

Youngster listens for guardian's occurrence in Angular 2

While the Angular documentation covers how to listen for child events from parents, my situation is actually the opposite. In my application, I have an 'admin.component' that serves as the layout view for the admin page, including elements such as a sidebar menu, task bar, and status. Within this parent component, I have set up a router system to switch between different administrator pages. The issue arises when it comes to saving data after these changes - the user clicks on the save button in the task bar located inside the admin.component, and the child component needs to be able to detect this click event in order to handle the saving process.

javascript typescript angular rxjs eventemitter

Answer 1

Answer №1

To preserve this information for the future, I wanted to highlight another more traditional approach to solving this issue: Simply get a reference to the ViewChild and then directly call one of its methods.

@Component({
  selector: 'app-child'
})
export class ChildComponent {

  notifyMe() {
    console.log('Event Triggered');
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>`
})
export class ParentComponent {

  @ViewChild('child')
  private child: ChildComponent;

  ngOnInit() {
    this.child.notifyMe();
  }
}

Answer 2

To preserve this information for the future, I wanted to highlight another more traditional approach to solving this issue: Simply get a reference to the ViewChild and then directly call one of its methods.

@Component({
  selector: 'app-child'
})
export class ChildComponent {

  notifyMe() {
    console.log('Event Triggered');
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>`
})
export class ParentComponent {

  @ViewChild('child')
  private child: ChildComponent;

  ngOnInit() {
    this.child.notifyMe();
  }
}

Answer 3

Answer №2

If you're looking for some guidance, this document might be just what you need:

https://angular.io/docs/ts/latest/cookbook/component-communication.html

You can make use of an observable or subject that the parent component provides to its children. Here's an example:

@Component({
  (...)
  template: `
    <child [parentSubject]="parentSubject"></child>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  parentSubject:Subject<any> = new Subject();

  notifyChildren() {
    this.parentSubject.next('some value');
  }
}

The child component can subscribe to this subject with ease:

@Component({
  (...)
})
export class ChildComponent {
  @Input()
  parentSubject:Subject<any>;

  ngOnInit() {
    this.parentSubject.subscribe(event => {
      // This function will be called when the notifyChildren method is
      // invoked in the parent component
    });
  }

  ngOnDestroy() {
    // It's important to unsubscribe if the child component gets re-created due to model changes
    // Keep in mind that subsequent subscriptions on the same subject will fail,
    // so the parent needs to recreate parentSubject on changes
    this.parentSubject.unsubscribe();
  }

}

Alternatively, a shared service with a similar setup could also be beneficial...

Answer 4

If you're looking for some guidance, this document might be just what you need:

https://angular.io/docs/ts/latest/cookbook/component-communication.html

You can make use of an observable or subject that the parent component provides to its children. Here's an example:

@Component({
  (...)
  template: `
    <child [parentSubject]="parentSubject"></child>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  parentSubject:Subject<any> = new Subject();

  notifyChildren() {
    this.parentSubject.next('some value');
  }
}

The child component can subscribe to this subject with ease:

@Component({
  (...)
})
export class ChildComponent {
  @Input()
  parentSubject:Subject<any>;

  ngOnInit() {
    this.parentSubject.subscribe(event => {
      // This function will be called when the notifyChildren method is
      // invoked in the parent component
    });
  }

  ngOnDestroy() {
    // It's important to unsubscribe if the child component gets re-created due to model changes
    // Keep in mind that subsequent subscriptions on the same subject will fail,
    // so the parent needs to recreate parentSubject on changes
    this.parentSubject.unsubscribe();
  }

}

Alternatively, a shared service with a similar setup could also be beneficial...

Answer 5

Answer №3

There may be a simpler solution if I have correctly interpreted the question. Here are the assumptions --

The parent component contains a save button
The data to be saved is located in the child components
All additional data required by the child component can be accessed from services

In the parent component

<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>

And in the child ..

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    // -- perform save function here
}

This setup simply forwards the button click to the child component, allowing the child to handle data saving independently.

EDIT: If it is necessary to pass data from the parent template along with the button click, this approach also supports that. Let me know if this is required and I will update the code examples accordingly.

Answer 6

There may be a simpler solution if I have correctly interpreted the question. Here are the assumptions --

The parent component contains a save button
The data to be saved is located in the child components
All additional data required by the child component can be accessed from services

In the parent component

<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>

And in the child ..

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    // -- perform save function here
}

This setup simply forwards the button click to the child component, allowing the child to handle data saving independently.

EDIT: If it is necessary to pass data from the parent template along with the button click, this approach also supports that. Let me know if this is required and I will update the code examples accordingly.

Answer 7

Answer №4

If you're encountering the error message 'notifyMe' of undefined, one potential solution is to invoke the method within ngAfterViewInit() rather than ngOnInit().

Answer 8

If you're encountering the error message 'notifyMe' of undefined, one potential solution is to invoke the method within ngAfterViewInit() rather than ngOnInit().

Youngster listens for guardian's occurrence in Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Array not transmitted via jQuery ajax

Proper utilization of react-hook-form in conjunction with TypeScript and material-ui to display error messages efficiently

How can I access a component variable within the styles in Angular?

Tips for displaying content in a stacked format when hovering, similar to a list item (<li>), using jquery/javascript

Obtaining Position Coordinates of an Element Linked to an Object in AngularJS $scope

How can I retrieve the position of a div or an image within a div (specifically the top and left coordinates) and incorporate these values into CSS?

Resolving CORS Origin Error in Angular: A Step-by-Step Guide

Unable to create selected buttons in Vue.js

The term 'MapEditServiceConfig' is being incorrectly utilized as a value in this context, even though it is meant to refer to a type

PHP script is not successfully receiving the Ajax post request that is

Steps for inserting a menu item into a Material UI Card

The Vuetify rating system seems to be having trouble displaying

What is the best way to determine which id has been clicked using jQuery?

Generate a custom string to reference a JSON object containing a variable from an Angular HTML document

Adding numerous values to a single key in a JSON object

Whenever attempting to choose a rating, the MUI dialog continuously refreshes and resets the selected rating

Error in TypeScript React: "Could not locate module: Unable to locate 'styled-components'"

The feature for favoriting or unfavorite a post is currently not functioning correctly on the frontend (react) side

Guide to attaching and displaying an image on a Three.js map

Guide to incorporating eslint with Next.js in a project that already has an eslint configuration