Angular2, subscribe property on EventEmitter not existing?

angular 4 eventemitter subscribe
angular eventemitter
angular 2 subscribe to event from another component
property 'subscribe' does not exist on type 'void
angularjs eventemitter
eventemitter typescript
angular output observable
property 'subscribe' does not exist on type 'subscription did you mean unsubscribe

My app.component contains the <nav> of the website, which uses [routerLink] to go to the different pages. It imports each of the pages' components. One of the pages is a login page. If the user is not logged in, I want the navigation to say Login- if the user is, Logout.

In app.component:

my_userO : userO = undefined;

constructor (private my_userS:userS){
    my_userS.userChanged.suscribe(temp => this.updateNav());

updateNav(){ 
    this.my_userO = this.my_userS.getUser(); 
}

logOut(){
    this.my_userS.setUser(undefined);
}

and in its template:

<li><a *ngIf="!my_userO" [routerLink]="['LoginPage']">Login</a></li>
<li><a *ngIf="my_userO" [routerLink]="['HomePage']"(click)="logOut()">Logout</a></li>

userS is a global service (it is bootstrapped in main.ts and not added as a provider in any of the components I am using it in) I have that looks like this:

public userChanged: EventEmitter<{}>
currentUser : userO = undefined;

constructor(private http:Http){
    this.userChanged = new EventEmitter();
}

getLogin(username: string, password: string): Promise<userO>{
    return this.http.get(this.getLoginUrl+username).toPromise().then(response => response.json().data).catch(this.handleError);
}

getUser(){
    return this.currentUser;
}

setUser(x_userO: userO){
    this.currentUser = x_userO;
    this.userChanged.emit(undefined);
}

In the login page, I just run getLogin then setUser with what the former returned.

My problem is that I get the error "Property suscribe does not exist on type EventEmitter<{}>".

Its a typo

Use subscribe, not suscribe

I don't have enough reputation to answer Colum below but that's totally incorrect.

  1. emit() returns void
  2. EventEmitter extends (inherits) Subject which is an observable and an observer.

    export declare class EventEmitter<T> extends Subject<T>
    

an EventEmitter is an rxjs Subject with some modifications, most notably it does not use next() to send a value down the stream but uses emit(). It also allows setting an async logic where the emit will be async.

Angular2, subscribe property on EventEmitter not existing?, Its a typo Use subscribe, not suscribe I don't have enough reputation to answer Colum below but that's totally incorrect. emit() returns void EventEmitter extends  @input, @output & Eventemitter @input. Input decorator marks the property as the input property. I.e it can receive data from the parent component. The parent component uses the property binding to bind it to a component property. Whenever the value in the parent component changes angular updates the value in the child component.

using vscode, auto complete added this line:

import { EventEmitter } from 'events';

i had to change it to the following to resolve this.:

import { EventEmitter } from '@angular/core';

Component events with EventEmitter and @Output in Angular , Created a custom change property to the <counter> template, using () event binding syntax, like we learned when  Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Property 'clientX' does not exist on type 'Event'.

It doesn't have a subscribe method as it does not return an observable.

The emit() method of EventEmitter does however return an observable so you need to create an input which is connected to the event that is emitted. You can then subscribe to this.

Take a look at this: http://www.syntaxsuccess.com/viewarticle/unit-testing-eventemitter-in-angular-2.0

Expose observable as @Output() parameter in future safe way , The property almost always returns an Angular EventEmitter. So if I have an existing observable stream that I want to expose as an output property though another component may not be subscribed to the output property. Angular2 EventEmitter and preventDefault() angular2 rxjs shared subscribe not firing. 5. Change property from SAME sibling components on click in Angular 4.

check for the import of EventEmitter

it should be import { EventEmitter } from '@angular/core';

Ward Bell: Do Not Expect EventEmitter To Be Observable In Angular 2, Last week, I blogged about how the EventEmitter class, in Angular 2, Do NOT count on EventEmitter continuing to be an Observable! (via the public property)​. If the console is available, log the error to the console. Using alpha 28, I accomplished programmatically subscribing to event emitters by way of the eventEmitter.toRx().subscribe(..) method. As it is not intuitive, it may perhaps change in a future release.

Angular 2 By Example, If not provided, the decorator uses the property name: @Output("workoutPaused"​) exercisePaused: EventEmitter<number> = new EventEmitter<number>(); This There are two functions available on EventEmitter that are of interest to us:  Usage noteslink. Extends RxJS Subject for Angular by adding the emit() method. In the following example, a component defines two output properties that create event emitters. When the title is clicked, the emitter emits an open or close event to toggle the current visibility stat

Angular Component Data Flows Using @Output and EventEmitter, Unlike AngularJS, Angular does not have two-way data binding. No modern web framework can exist without support of two-way data binding. @Output decorator marks a class field as an output property and Any handler can handle these events by subscribing to an instance of EventEmitter class. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Angular Service, Working with services that already exist (like HttpClient ) is cool and easy. But your However EventEmitter was not designed for services! Ideally, your service API should expose an Observable so it can emit the event. reactive way, so Angular doesn't need to check the countdown property all the time. I have an Angular2 component which I am downgrading to use in an Angular 1 app. Using the @output property inside my app component class does not seem to bubble up the event to my Angular 1 app in which my app component is downgraded and used. Ex:

Comments
  • Thanks... sorry, I have no idea why it wasn't working since I was following someone else's example, and then the angular.io doc showed a subscribe property... I need to get more sleep haha. It compiles now, but I can't test it until later.
  • ugh... dat facepalm when I have been not understanding why suscribe is not defined for at least half an hour...