Altering a public variable of a component from a sibling component

Question

Altering a public variable of a component from a sibling component

Within my application, I have two sibling components that are being set from the app.component:

<my-a></my-a>
<my-b></my-b>

The visibility of <my-a> is determined by a public variable in its component:

@Component({
  moduleId: module.id,
  selector: 'my-a',
  templateUrl: `<div *ngIf="visible">Hello World</div>`
})

export class MyAComponent {
    public visible = false;
}

I want to update the value of visible after clicking on an element within <my-b>:

@Component({
  moduleId: module.id,
  selector: 'my-b',
  templateUrl: `<div (click)="onClick()">Click Me</div>`
})

export class MyBComponent {
    onClick() {
        // logic goes here
    }
}

How can I change visible = true in <my-a> from <my-b>? Should this functionality be handled in the parent app.component?

UPDATE

After receiving some feedback, I was able to achieve the desired behavior using a few lines of jQuery:

@Component({
  moduleId: module.id,
  selector: 'my-b',
  templateUrl: `<div (click)="onClick('my-a')"></div>`
})

export class MyBComponent {
    onClick(element) {
        $(element).show(); // or hide() or toggle() or different actions
    }
}

Although this approach works well and can be easily scaled for multiple elements, I am concerned about whether using jQuery in Angular2 is considered good practice.

angular typescript public

Answer 1

Answer №1

One way to achieve this is by utilizing the EventEmitter and Input in Angular.

Component X:

@Component({
  moduleId: module.id,
  selector: 'my-x',
  templateUrl: `<div *ngIf="isVisible">Hello World</div>`
})

export class MyXComponent {
    // listen for input variable passed by parent
    @Input() isVisible;
}

Component Y:

@Component({
  moduleId: module.id,
  selector: 'my-y',
  templateUrl: `<div (click)="onClicked()">Click Me</div>`
})

export class MyYComponent {
    // create EventEmitter to emit when onClicked method is called
    @Output() isVisible = new EventEmitter();
    onClicked() {
        this.isVisible.emit();
    }
}

And in the parent component:

@Component({
  moduleId: module.id,
  selector: 'parent',
  // pass isVisible variable to MyXComponent and listen for onClicked event from MyYComponent
  templateUrl: `<my-x [isVisible]="isVisible"></my-x>
                <my-y (onClicked)="toggleVisibility()"></my-y>`
})

export class ParentComponent{
    private isVisible: boolean = false;
    // toggle visibility based on emitted event from MyYComponent
    toggleVisibility() {
    if (this.isVisible === false) {
    this.isVisible = true;
    } else {
        this.isVisible = false;
        }      
    }
}

In more complex scenarios, consider using a shared service instead.

Answer 2

One way to achieve this is by utilizing the EventEmitter and Input in Angular.

Component X:

@Component({
  moduleId: module.id,
  selector: 'my-x',
  templateUrl: `<div *ngIf="isVisible">Hello World</div>`
})

export class MyXComponent {
    // listen for input variable passed by parent
    @Input() isVisible;
}

Component Y:

@Component({
  moduleId: module.id,
  selector: 'my-y',
  templateUrl: `<div (click)="onClicked()">Click Me</div>`
})

export class MyYComponent {
    // create EventEmitter to emit when onClicked method is called
    @Output() isVisible = new EventEmitter();
    onClicked() {
        this.isVisible.emit();
    }
}

And in the parent component:

@Component({
  moduleId: module.id,
  selector: 'parent',
  // pass isVisible variable to MyXComponent and listen for onClicked event from MyYComponent
  templateUrl: `<my-x [isVisible]="isVisible"></my-x>
                <my-y (onClicked)="toggleVisibility()"></my-y>`
})

export class ParentComponent{
    private isVisible: boolean = false;
    // toggle visibility based on emitted event from MyYComponent
    toggleVisibility() {
    if (this.isVisible === false) {
    this.isVisible = true;
    } else {
        this.isVisible = false;
        }      
    }
}

In more complex scenarios, consider using a shared service instead.

Answer 3

Answer №2

The concept is divided into three segments, all revolving around the main app.component. It can be broken down into specific tasks:

The need to allow external sources to alter visibility. This can be achieved using an Input property
Featuring a button whose purpose is to trigger an action on a different component. Therefore, it requires an Output property (in the form of an EventEmitter)
The parent object can then connect to 's Output in order to set a variable that binds to 's Input.

Input property within MyAComponent

import { Component, Input } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-a',
  template: `<div *ngIf="visible">Hello World</div>`
})
export class MyAComponent {
    @Input() visible: boolean = false;
}

This is how the parent component's HTML would look like to configure this:

<my-a [visible]="aVisibility"></my-a>

Output property in MyBComponent

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-b',
  template: `<div (click)="onClick()">Click Me</div>`
})
export class MyBComponent {
    @Output() makeVisible: EventEmitter<void> = new EventEmitter<void>();

    onClick() {
        this.makeVisible.emit();
    }
}

To listen to changes as a parent component, the HTML structure should resemble this:

<my-b (makeVisible)="makeAVisible()"></myb>

Integration through the parent component

import { component } from '@angular/core';
@Component({
    moduleId: module.id,
    selector: my-app,
    template: `
      <my-a [visible]="aVisibility"></my-a>
      <my-b (makeVisible)="makeAVisible()"></myb>
    `
})
export class MyApp {
    private aVisibility:boolean = false;

    makeAVisible() : void {
        this.aVisibility = true;
    }
}

Additional Information

This code has not been tested, so there may be typos and errors present. Additionally, if communication between components becomes complex, using a shared Service might be preferable. However, for a simple scenario like this, utilizing the parent component should suffice.

Answer 4

The concept is divided into three segments, all revolving around the main app.component. It can be broken down into specific tasks:

The need to allow external sources to alter visibility. This can be achieved using an Input property
Featuring a button whose purpose is to trigger an action on a different component. Therefore, it requires an Output property (in the form of an EventEmitter)
The parent object can then connect to 's Output in order to set a variable that binds to 's Input.

Input property within MyAComponent

import { Component, Input } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-a',
  template: `<div *ngIf="visible">Hello World</div>`
})
export class MyAComponent {
    @Input() visible: boolean = false;
}

This is how the parent component's HTML would look like to configure this:

<my-a [visible]="aVisibility"></my-a>

Output property in MyBComponent

import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'my-b',
  template: `<div (click)="onClick()">Click Me</div>`
})
export class MyBComponent {
    @Output() makeVisible: EventEmitter<void> = new EventEmitter<void>();

    onClick() {
        this.makeVisible.emit();
    }
}

To listen to changes as a parent component, the HTML structure should resemble this:

<my-b (makeVisible)="makeAVisible()"></myb>

Integration through the parent component

import { component } from '@angular/core';
@Component({
    moduleId: module.id,
    selector: my-app,
    template: `
      <my-a [visible]="aVisibility"></my-a>
      <my-b (makeVisible)="makeAVisible()"></myb>
    `
})
export class MyApp {
    private aVisibility:boolean = false;

    makeAVisible() : void {
        this.aVisibility = true;
    }
}

Additional Information

This code has not been tested, so there may be typos and errors present. Additionally, if communication between components becomes complex, using a shared Service might be preferable. However, for a simple scenario like this, utilizing the parent component should suffice.

Altering a public variable of a component from a sibling component

Answer №1

Answer №2

Input property within MyAComponent

Output property in MyBComponent

Integration through the parent component

Additional Information

Similar questions

Failure to Generate stats.json File When Building Angular 6 with --stats-json Flag

React TypeScript - Module not found

Enroll in a stream of data while iterating through a loop in an Angular application

Angular2's customer filter pipe allows for easy sorting and filtering of

How to make a node application run as an executable within an NX workspace

Unable to open modal window in Angular 14 micro-frontend application

Is there a way to dynamically transfer projected content to child components without using <ng-content> for rendering?

What is the best way to retrieve a value from an array of objects containing both objects and strings in TypeScript?

The 'ngForOf' directive cannot be bound to 'div' element as it is not recognized as a valid property

Updating the page dynamically in React/Redux by making API calls based on user submissions

Prevent Duplicate Service Instances in Angular

Best Practices for TypeScript and React: How to Handle Component State for Mounted Components

Error message "The result of this line of code is [object Object] when

Preventing recursive updates or endless loops while utilizing React's useMemo function

Encountering an issue when attempting to attach an event listener to the entire document

While attempting to send a GET Request in Angular, access to XMLHttpRequest has been denied due to CORS policy restrictions

How to globally install electron using NPM on Ubuntu

Having difficulties utilizing React Syntax Highlighter in Next.js 13 with Sanity version 3

Ways to verify that the Google Analytics code is functioning properly within an Angular 2 application

Using Bootstrap 4 Datatablejs within an Angular4 CLI project