Skip to content

Latest commit

 

History

History
37 lines (26 loc) · 1.03 KB

TUNNEL.md

File metadata and controls

37 lines (26 loc) · 1.03 KB

@Tunnel

This decorator allows you to communication between instances of the same components/class.

For example, consider the following sibling components

   <app-foo></app-foo>
   <app-foo></app-foo>

If you want them to be able to communicate using @Tunnel do

    @Component({ ... })
    export class FooComponent implements ngOnInit {
        @Tunnel() tunnel$;
        
        constructor(private route: ActivatedRoute) {}
        
        ngOnInit(): void {
            this.tunnel$.subscribe(data => {
                if (data.sender !== this) { ... }
            });
        }
        
        doFooBarAction(): void {
            this.tunnel$.next({sender: this, action: 'foobar'});
        }
    }

Note: It is required that the component has the ngOnInit implemented!

This decorator is not limited to sibling communication only, it goes straight through all routes! If you want to see this in action, go to the demo