Angular 2: emitter listener between components

Question

I am making a 'skip to content' link. The link is in app.component and the content is in login.component, along with the target.

I've tried several methods, none of which worked out. So now I'm trying emitter/listener:

app.component (emitter):

import { Component, Output, EventEmitter} from '@angular/core';

export class AppComponent {

    @Output() skipToCtrl: EventEmitter<any> = new EventEmitter();

    skipLink() {
        this.skipToCtrl.emit();
    }
}

<a href="#content-start" (click)="skipLink()">Skip to main content</a>

login.component (listener):

<input type="text" #firstControl name="username" />

Don't know how login can subscribe to the event from within login. I keep finding articles that say not to do it How to subscribe to an event on a service in Angular2? but no articles that describe how to do it.

Answer 1

Event emitters are used to add output into the templates. Using the round brackets () for binding to the event.

When you create a component:

@Component({...})
public export FooComponent {
   @Output() name: EventEmitter = new EventEmitter<string>();
}

The above component now has an attribute that can be used with the () brackets in another template.

In another template:

 <foo (name)="// code here //"></foo>

When the event is emitted (by calling this.name.emit("value")) the above "code here" expression is executed by Angular. The emit function takes a single argument which is passed to the expression as a $event variable.

To have another component receive these events is to use the expression in that other component's template.

Let's create a Bar component

@Component({...})
export class BarComponent {
    public setName(value:string) {
        console.log(value); // will output "chicken"
    }
}

The above component has this template:

<foo (name)="setName($event)"></foo>

Now in the Foo component we emit a value.

@Component({...})
public export FooComponent implements OnInit {
   @Output() name: EventEmitter = new EventEmitter<string>();

   public ngOnInit() {
       this.name.emit("chicken");
   }
}

This creates one-way communication from the Foo component to the Bar component via the template expressions.