CODEWITHSUNDEEP
angulartypescript
miki
miki

Reputation: 83

Angular 5 return object from http post

I'm struggling with passing json from service layer to component and then invoking functions sequentially. Here is what I've already accomplished:

users.service.ts

addUser(user: User) {
    return this.http.post('http://localhost:8080/user/create', user).map(res => res.json());
  }

And then component layer:

async onSubmit(model) {
await new Promise(resolve => {
  setTimeout(() => {
    this.submitted = true;
    this.usersService.addUser(model).subscribe(data => this.savedModel = data);
    resolve();
  }, 500);
});
this.sendNotification();
}

@Output() notifyParent: EventEmitter<any> = new EventEmitter();
sendNotification() {
this.notifyParent.emit(JSON.stringify(this.savedModel));
}

savedModel is undefined. How can I fix this/what am I doing wrong?

EDIT: Top of the component is:

@Component({
selector: 'app-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

groups: Group[];
model: User;
savedModel;

Upvotes: 0

Views: 1142

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

It seems like addUser may be taking longer than 500 seconds, but rather than create an artificial timer you can emit when user service completes.

onSubmit(modal) {
  this.usersService.addUser(model).subscribe(data => {
    this.savedModel = data;
    this.sendNotification(); // or just .emit here
  });
}

You also don't need to wrap this in a Promise or anything.

Upvotes: 1

Related Questions