How to write a Angular 6 Subscriber function

Question

I have seen a code in a video and it is as follows.

this.droppableService.dragEnd$.subscribe( next:event=> this.onDragEnd(event));

When in include it in my directive folder it gives an error as follows.

ERROR in src/app/draggable/dropzone.directive.ts(16,49): error TS1005: ',' expected.

How can i implement in Angular 6?

`(next: Event) => ...` where next is the variable **name** and Event is the variable **type** (which shouldn't be necessary: you can just write `next => ...`. — JB Nizet, Sep 14 '18 at 10:00
For an irrelevant or no present variable jsut use () => ..... Wrapping your body in { ..... } is a good practice: () => { } For further syntax understanding look up lamda or arrow function — Daddelbob, Sep 14 '18 at 10:02
this.droppableService.dragEnd$.subscribe(event => this.onDragEnd(event)); worked. Thanks — Gethma, Sep 14 '18 at 10:07

score 0 · Answer 1 · answered Sep 14 '18 at 10:05

0

You can assign a type in this way :

this.droppableService.dragEnd$.subscribe( (next:event) => {
  this.onDragEnd(next);
});

Or, if event is of type next :

this.droppableService.dragEnd$.subscribe( (event:next) => {
  this.onDragEnd(event);
});

Note: The $ should be putted at the start of Observable, subject and BehaviorSubject, not at the end.

answered Sep 14 '18 at 10:05

Jacopo Sciampi

2,990
1
20
44

Err, no. The convention is to put the $ at the end. https://stackoverflow.com/questions/37671700/angular2-style-guide-property-with-dollar-sign – JB Nizet Sep 14 '18 at 10:07

score 0 · Answer 2 · answered Sep 15 '18 at 05:10

this.droppableService.dragEnd$.subscribe( next:event=> this.onDragEnd(event));

This is right way of defining a subscriber function in angular6.

But the problem is in the syntax of arrow function which you passed in subscribe call.

to define an arrow function syntax is

(arguments)=>{
     ......  
     code 
     ..... 
 }

like if you have only one line of code in method body you can define the arrow function like this

(argument)=> console.log('for single line in the method block');

but in case of when you have single line of code but more then 2 arguments or need to define the type of the argument(like you do in your case next:event ) you need to follow the first one syntax .

so same problem you are facing in your case

this.droppableService.dragEnd$.subscribe( next:event=> this.onDragEnd(event));

when you pass the argument next:Event (next argument of Event type) it through an error while you are building this .

if you have intelliSense in your editor it gives you a warning that exepected 1 got 2 something like that.

so below define both syntax should work .

this.droppableService.dragEnd$.subscribe( (next:event)=> {this.onDragEnd(event)});
this.droppableService.dragEnd$.subscribe( next=>this.onDragEnd(event));

How to write a Angular 6 Subscriber function

2 Answers2