Executing a local reference in the parent component from a child component event in Angular 2: How to do it?

Question

Executing a local reference in the parent component from a child component event in Angular 2: How to do it?

I am currently puzzled by the challenge of activating a local reference in the parent component template such as #rightNav triggered by a click event (click)="rightNav.open()" from the child component template using Material 2 sidenav. I have a hunch that the @ViewChild annotation is needed, but I'm uncertain about the implementation.

Child component template (app-conditions-list):

<div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
            (click)="rightNav.open()"></div>

Parent component template (condition component):

import { Component} from '@angular/core';
import { ConditionsListComponent } from './listComponent/conditions-list.component';


@Component({
    moduleId: module.id,
    selector: 'app-conditions',
    template: `
            <md-sidenav #rightNav align="end" mode="side">
            "Condition details will open here on click event"
            </md-sidenav>
            <app-conditions-list></app-conditions-list>`,
    styleUrls: ['./conditions.component.css'],
    directives: [
        ConditionsListComponent,
    ]
})

export class ConditionsComponent  {
    title = "Conditions Manager"
}

The child component is nested within the parent component template. Much appreciated for any help provided!

angular typescript components angular-material2

Answer 1

Answer №1

To enable communication between components, you can create an output in the child component and then listen for events from it.

export class ConditionsListComponent {
  @Output() navOpen:EventEmitter = new EventEmitter();
}

You can utilize a template variable to reference sibling elements like so:

<div #rightNav align="end" mode="side" (close)="close($event)"</div>
<app-conditions-list (navOpen)="rightNav.open()"></app-conditions-list>

And trigger an event with:

<div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
        (click)="navOpen.next(null)"></div>

Answer 2

To enable communication between components, you can create an output in the child component and then listen for events from it.

export class ConditionsListComponent {
  @Output() navOpen:EventEmitter = new EventEmitter();
}

You can utilize a template variable to reference sibling elements like so:

<div #rightNav align="end" mode="side" (close)="close($event)"</div>
<app-conditions-list (navOpen)="rightNav.open()"></app-conditions-list>

And trigger an event with:

<div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
        (click)="navOpen.next(null)"></div>

Answer 3

Answer №2

To ensure event propagation from child to parent, you must bubble up the event:

The child component:  

export class ConditionsListComponent  {
   @Output('myEvent') myEvent = new EventEmitter();

   private bubbleUp($event:Event){
     myEvent.emit($event)
  }
}

Here is the view of the child component:

<div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
        (click)="bubbleUp($event)"></div>

And now, let's look at the parent component:

import { Component} from '@angular/core';

@Component({
moduleId: module.id,
selector: 'app-conditions',
template: `
        <div #rightNav align="end" mode="side" (close)="close($event)"</div>
        <app-conditions-list (myEvent)='gotTheEvent($event)' ></app-conditions-list>`,
styleUrls: ['./conditions.component.css'],
providers: [],
directives: [
    ConditionsListComponent,
]
})

export class ConditionsComponent  {
   title = "Conditions Manager";

   gotTheEvent($event){

     console.log('I got this event from my child',$event);

    // Perform any desired actions

     rightNav.open()
  }
}

Answer 4

To ensure event propagation from child to parent, you must bubble up the event:

The child component:  

export class ConditionsListComponent  {
   @Output('myEvent') myEvent = new EventEmitter();

   private bubbleUp($event:Event){
     myEvent.emit($event)
  }
}

Here is the view of the child component:

<div *ngFor="let condition of conditions" [class.selected]="condition === selectedCondition"
        (click)="bubbleUp($event)"></div>

And now, let's look at the parent component:

import { Component} from '@angular/core';

@Component({
moduleId: module.id,
selector: 'app-conditions',
template: `
        <div #rightNav align="end" mode="side" (close)="close($event)"</div>
        <app-conditions-list (myEvent)='gotTheEvent($event)' ></app-conditions-list>`,
styleUrls: ['./conditions.component.css'],
providers: [],
directives: [
    ConditionsListComponent,
]
})

export class ConditionsComponent  {
   title = "Conditions Manager";

   gotTheEvent($event){

     console.log('I got this event from my child',$event);

    // Perform any desired actions

     rightNav.open()
  }
}

Executing a local reference in the parent component from a child component event in Angular 2: How to do it?

Answer №1

Answer №2

Similar questions

What is the process for incorporating a custom type into Next.js's NextApiRequest object?

Lately, I've run into some challenges while trying to set up a category filter for an online store being developed with NodeJs and Angular

Tips for configuring the Index column within an Angular Mat-table (when the dataIndex displays 'NaN')

Developing a REST API for a component with 18 interconnected elements

Managing Keyboard Input in React using TypeScript

When using Vue 3 in my app, I discovered that all the TypeScript files are easily accessible through the browser console

Unveiling the Mysteries of HTTP Headers in Angular

Why does TypeScript permit the storage of incorrect types?

Exploring the power of Google Maps with Angular 17

Getting the component selector name within a Directive in Angular 4

Managing forms in Django rest framework and Angular2

Can I avoid getting a message from an observable by exclusively using complete: () =>?

No information available in react-devtools for a fresh react-native project

I am having trouble combining my custom middleware with the default middlewares in my store configuration when using redux persist and rtk query

Struggled with setting up the WebSocket structure in typescript

The Azure repository for Angular is populated with approximately 43,000 distinct files

How can angular/typescript be used to convert a percentage value, such as 75.8%, into a number like 75.8?

React: Eliminate the reliance on two interconnected contexts by implementing a globally accessible constant object

Can ngForm be utilized with div elements in Angular 2?

Can we intercept the same API call twice while a webpage is being loaded using Cypress?