Need to dynamically change the title titleItemPanel of the ItemsPanelComponent based on the action triggered by editItem() in the ItemsPageComponent. The hierarchy here includes: ItemsPageComponent -> ItemsMapComponent -> ItemsPanelComponent. When the child component (ItemsPanelComponent) emits the event getItemPanelTitle, it needs to be caught by the grandparent (
ItemsPageComponent>). From there, it should be passed up to the parent (<code>ItemsMapComponentItemsPageComponent).
ItemsPageComponent:
export class ItemsPageComponent {
@Output() isTitleCreateItem = new EventEmitter<boolean>();
editItem(itemId: string, event) {
...
this.isTitleCreateItem = !this.isTitleCreateItem;
} <button md-icon-button
(click)="editItem(item.id, $event)">
<md-icon>mode_edit</md-icon>
</button>
ItemsPanelComponent:
export class ItemsPanelComponent {
public titleItemPanel: string;
...
getItemPanelTitle(event: boolean) {
this.titleItemPanel = event ? 'Create' : 'Edit';
}
}<h4 (isTitleCreateItem)="getItemPanelTitle($event)" class="panel__title">
{{titleItemPanel}}
</h4>