Angular 2 master slave directives communication. Inter directive communication

Question

I want to create a selectable list in Angular2:

import {Directive, ElementRef, HostListener, Input, Output, EventEmitter} from "@angular/core";

@Directive({selector: 'li'})
export class ListItem {

   @Input() private selectableItem: any;
   @Output('selectedEvent') private selectedEvent: EventEmitter<any> = new EventEmitter<any>();

   constructor(private hostElement: ElementRef) {
   }

   @HostListener('click', ['$event'])
   private toggleSelected(event: MouseEvent): void {
       this.hostElement.nativeElement.classList.toggle('selected');
       this.selectedEvent.emit(this.selectableItem);
   }

}



@Directive({selector: '[selectableList]'})
export class SelectableListDirective {

   constructor(private hostElement: ElementRef) {
   }

   @HostListener('selectedEvent', ['$event'])
   private liWasClicked(event): void {
       console.log(event);
   }
}

And I'm trying to use it like so:

<ul selectableList>
    <li *ngFor="let item of items" [selectableItem]="item">
        <span>{{item}}</span>
    </li>
</ul>

Plunker: https://plnkr.co/edit/umIE6yZwjyGGvJdYe7VS?p=preview

The problem is: liWasClicked never gets clicked!

Answer 1

I just made a directive which does what you want: https://www.npmjs.com/package/ngx-selectable-list

This is the master directive: https://github.com/darkbasic/ngx-selectable-list/blob/master/src/directive/selectable-list/selectable-list.directive.ts

This is the slave directive: https://github.com/darkbasic/ngx-selectable-list/blob/master/src/directive/selectable-item/selectable-item.directive.ts

They communicate through a shared service, unfortunately this is the only way.

I still didn't manage to write a README for it because I encountered some packaging issues: as a result if you use angular-cli it will probably work only in AOT mode at the moment.

You can find some usage examples here

Mode 1:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chat-viewer/containers/chat/chat.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chat-viewer/components/messages-list/messages-list.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chat-viewer/components/message-item/message-item.component.ts

In this mode we only do multiple selection, activated by a press event and with a projected confirmation button.

Mode 2:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-lister/containers/chats/chats.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-lister/components/chats-list/chats-list.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-lister/components/chat-item/chat-item.component.ts

Now the directive works in both single and multiple mode: it listen for tap events but it also activates the multiple selection mode with a press event.

Mode 3:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/b941aa2202279c4e1c879125a8551b0c4649e7d8/src/app/chats-lister/containers/chats/chats.component.ts

I previously always projected the confirmation button through content projection, but you can do it differently: instead you can listen for selectItemIds events and emit a selectionConfirmed event once the user clicks on your own confirmation button.

Mode 4:

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-creation/containers/new-group/new-group.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-creation/components/users-list/users-list.component.ts

https://github.com/Urigo/whatsapp-client-angularcli-material/blob/master/src/app/chats-creation/components/user-item/user-item.component.ts

In this example the directive works in multiple_tap mode: the multiple selection is initializated by a tap instead of a press event.

Everything will be clearer once I'll write the documentation and attach some GIFs to show the different modes.