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.