Pass an html ngModel value to service

Question

I want to pass an html ngModel value <input type="email" [(ngModel)]="email"/> which is located on app.component.html, to a service which is called email.service.ts. Inside the service I have this code:

const apiEmail ='http://apilayer.net/api/check?access_key=key' +'&email=' +emailAddress;

I want to dynamically pass the [(ngModel)]="email" value to +emailAddress so every time the user inputs an email adress to be able to check if it exists or not.

Thank you!

In the doc the use of ngModel is explained :) : https://angular.io/api/forms/NgModel#using-ngmodel-on-a-standalone-control You can then send the value to component with: https://angular.io/api/core/Output — Jboucly, Oct 23 '20 at 13:33

score 1 · Answer 1 · answered Oct 23 '20 at 13:37

You could easily define a setter for the email property in your component and call the required service-method there.

Component

private _email: string;

set email(email: string) {
  this._email = email;
  this.emailService.checkEmail(email);
}

get email() {
  return this._email;
}

score 0 · Answer 2 · answered Oct 23 '20 at 13:37

0

Change emailAddress to email

Thanks Danial

answered Oct 23 '20 at 13:37

M Danial

166
1
4

It cannot read 'email' The [(ngModel)]="email" is on app.component.html, variable 'email' is set on app.component.ts and the const apiEmail ='http://apilayer.net/api/check?access_key=key' +'&email=' +emailAddress; is on email.service.ts – random.dude Oct 23 '20 at 13:47

Pass an html ngModel value to service

2 Answers2