Angular2 passing data to click handler

Question

I am not sure if I am phrasing all of this correctly; a lot has changed in Angular2. I am trying to pass form data to a component's service. I want to pass this data whenever the "Generate" button is clicked. I am encapsulating the form data in an object, and want to pass that object to a service that's injected into the component. The service performs all of the heavy lifting. All the component really does is display the output.

generator.component.ts

export class Generator {
    passwords: string[]; // output array
    passwordsObj: Object = { // form data passed to service
        letters: "",
        numbers: "",
        symbols: "",
        amount: ""
    };
    constructor(gs: GeneratorService) {
        this.passwords = gs.generatePasswords(passwordsObj); // originally hard-coded, I want to now trigger this method when the "Generate" button is clicked
    }

    clicked(obj) {
        // handle the click event?
    }
}

I want the generatePasswords method to take the passwordsObj as an argument. I know how to do that. I just don't know how to trigger the service's generatePasswords method when the component's button is clicked.

generator.component.html snippet

<button type="submit" (click)="clicked(passwordsObj)">Generate</button>

Jean-Philippe Leclerc · Accepted Answer · 2016-04-22 16:31:06Z

2

Use private or public to create an initialize the gs member/property (see the TypeScript Handbook, section Parameter Properties for more information about that):

constructor(private gs: GeneratorService) {}

Then in your click event handler, simply call the service method and pass your passwordsObj as a parameter:

clicked() {
   this.passwords = this.gs.generatePasswords(this.passwordsObj);
}

Note that you do not need to pass passwordsObj to the event handler, since it is a property of the component, hence the clicked() method has access to it via the this object.

edited Apr 22, 2016 at 16:31

Jean-Philippe Leclerc

6,8055 gold badges45 silver badges66 bronze badges

answered Apr 22, 2016 at 16:22

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BrianRT Over a year ago

I have another question related to stackoverflow.com/questions/36109641/…, but don't want to duplicate it (I can't comment on other questions yet). I'm trying to bind user input like <input (ngModel)="passwordsObj.letters">, but it's not working. I thought that would bind user input to the data source. I don't want to use two way bindings (avoid [(ngModel)]). Do I have to use @Input for that?

Mark Rajcok Over a year ago

@daChi, you should create another question, but if you don't want two-way binding, you probably want <input (input)="passwordsObj.letters = $event.target.value">.

Thierry Templier · Accepted Answer · 2016-04-22 16:09:52Z

0

You could try this:

clicked() {
  this.passwords = gs.generatePasswords(this.passwordsObj);
}

with

<button type="submit" (click)="clicked()">Generate</button>

answered Apr 22, 2016 at 16:09

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Collectives™ on Stack Overflow

Angular2 passing data to click handler

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related