CODEWITHSUNDEEP
angularangular-services
sree
sree

Reputation: 389

is it possible to call a function from service in onclick event in angular 4

I have written a method getDataMethod() in the service 'data.service.ts'. I want to call this function when someone clicks on a submit button from the html page.

I have created an instance of the service in the constructor of the component, like below:

cnstructor(private dataservice: DataService){
    this.data-service-method = this.dataservice.getDataMethod();
}

How to call this function?

Upvotes: 4

Views: 10680

Answers (3)

planet_hunter
planet_hunter

Reputation: 3976

As @Sajeetharan already mentioned, you will have to call the service from the component.

Check out this stackblitz POC which also shows how to import the created service in your module before you can inject it in the component.

Service

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

@Injectable()
export class Service {

  public getData(): string {
    return "Data From Service";
  }
}

Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { Service } from './service'

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  providers: [Service],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Component

import { Component } from '@angular/core';
import { Service } from './service'

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    name = 'Angular 6';

    public data: string;

    constructor(private _Service: Service) {

    }

    public getData(): void {
        this.data = this._Service.getData();
    }

}

HTML

<hello name="{{ name }}"></hello>

<button (click)="getData()">get data</button>

<p> data from service - {{data}} </p>

Upvotes: 1

Nima Hakimi
Nima Hakimi

Reputation: 1392

You need to provide your service to a parent module or component itself (you can take one other approach in angular v6, take a look at official docs) and then inject it into your component, then you can use it on click or submit event.

Component(.ts) file:

export class TestComponent {
    constructor(public testService: TestService) {
    }
}

Template (.html) file:

<button (click)="testService.getDataService()">Button</button>

Although it's better if you call the service method from a method declared inside the component.

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

You need to create an instance of the service inside the constructor of the component, then refer the service and call the method.

import { DataService } from './data.service';


export Class ComponentA { 
 constructor(public dataService: DataService) { } 
 myFunct(){
   this.dataService.getDataService().subscribe();
}
}

Upvotes: 7

Related Questions