Angular2 passing data to click handler
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.
BrianRT
Updated on June 04, 2022Comments
-
BrianRT almost 2 years
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 thepasswordsObj
as an argument. I know how to do that. I just don't know how to trigger the service'sgeneratePasswords
method when the component's button is clicked.generator.component.html snippet
<button type="submit" (click)="clicked(passwordsObj)">Generate</button>
-
BrianRT about 8 yearsI 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 about 8 years@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">
.