CODEWITHSUNDEEP
angulartypescript
Maniac_1979
Maniac_1979

Reputation: 979

angular2 button click in list item

I have a selectable list item with a button.

Clicking the list item selects the item. Clicking the button on the list item should do an action with the selected item (delete in this case). However the delete action happens before the selection

How can I force the selection before the action?

HTML:

<accordion [showArrows]="true" [expandAll]="true">
    <accordion-group heading="Saved Queries">
            <ul class="list-group" *ngFor="let query of userQueries" >
                <a class="list-group-item" (click)="queryClick(query)">{{query.QueryName}}
                    <span class="pull-right button-group">
                        <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span></button>
                        <button type="button" class="btn btn-danger btn-xs" (click)="test()"><span class="glyphicon glyphicon-remove"></span></button>
                    </span>
                </a>
            </ul>       
    </accordion-group>

TS:

private queryClick(selectedQuery:UserQuery) {
        this.selectedQuery = selectedQuery;
        this.userQueryService.selectQuery(selectedQuery)
    }

    private test(){
        console.log(this.selectedQuery);
    }

Upvotes: 0

Views: 2678

Answers (2)

AVJT82
AVJT82

Reputation: 73337

If you want to delete item, why click before? Why not click button delete on which item you want to delete:

<button type="button" class="btn btn-danger btn-xs" (click)="test(query)"><span class="glyphicon glyphicon-remove"></span></button>

private test(query){
    console.log(query);
    // do whatever you want
}

I think you are misunderstanding here, you don't NEED to select a query first to be able to delete it. When you click the button next to the query you want to delete, you pass that particular query in the method, and then you can do whatever you want with that query! :)

The reason why I think you are misunderstanding is below: You mean that if you click your "Test"-button first, that you don't have access to your selectedQuery in your test method, as that would in below case just console.log undefined. 

private queryClick(selectedQuery:UserQuery) {
        this.selectedQuery = selectedQuery;
        this.userQueryService.selectQuery(selectedQuery)
    }

private test(){
    console.log(this.selectedQuery);
}

But to be able to delete (or do whatever) you have to pass to the test-method WHICH query you want to delete, i.e look at the beginning at my answer, where query is passed as a parameter :)

Upvotes: 2

n00dl3
n00dl3

Reputation: 21564

Short answer:

You can't "force the selection before the action".

Long answer :

That's how events are handled by the browser, when an event is triggerred in the dom it propagates up throught all receiver's parents.

The fact is I don't see why you need such a behavior as you can implement such a thing :

<accordion [showArrows]="true" [expandAll]="true">
    <accordion-group heading="Saved Queries">
            <ul class="list-group" *ngFor="let query of userQueries" >
                <a class="list-group-item" (click)="queryClick(query)">{{query.QueryName}}
                    <span class="pull-right button-group">
                        <button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-edit"></span></button>
                        <button type="button" class="btn btn-danger btn-xs" (click)="delete(query)"><span class="glyphicon glyphicon-remove"></span></button>
                    </span>
                </a>
            </ul>       
    </accordion-group>
</accordion>

delete(query){
    //handle deletion
}

Upvotes: 1

Related Questions