In Angular 7 when two buttons are nested the second one is ignored

Question

In some Angular 7 template I have two button (click) nested. The second one is unclikable : the first one only answer the (click). How may I set the second button clickable ?

This html code comes from an Angular 5 course : https://openclassrooms.com/fr/courses/4668271-developpez-des-applications-web-avec-angular/5091266-creez-une-application-complete-avec-angular-et-firebase

<button
    class="list-group-item"
    *ngFor="let book of books; let id = index"
    (click)="onViewBook(id)">
    <h3 class="list-group-item-heading">
    Titre : {{ book.title }}
<!-- ignored code starts here -->
    <button class="btn btn-default pull-right"
        (click)="onDeleteBook(book)">
        <span class="glyphicon glyphicon-minus"></span>
    </button>
<!-- end of ignored code -->
    </h3>
    <p class="list-group-item-text">
    Auteur : {{ book.author }}</p>
</button>

I don't think that having nested buttons is valid HTML. Take a look at [this post](https://stackoverflow.com/q/39386497/1009922). — ConnorsFan, Jun 20 '19 at 15:05
You can't put buttons inside a `button` element.A button is not meant to contain other buttons. — nircraft, Jun 20 '19 at 15:35

score 2 · Accepted Answer · answered Jun 20 '19 at 17:15

Nesting buttons is not valid in HTML like commented before by @ConnorsFan.

Instead, change the first button to div. This way your UX + UI will work perfectly.

<div
    class="list-group-item"
    *ngFor="let book of books; let id = index"
    (click)="onViewBook(id)">
    <h3 class="list-group-item-heading">
    Titre : {{ book.title }}
<!-- ignored code starts here -->
    <button class="btn btn-default pull-right"
        (click)="onDeleteBook(book)">
        <span class="glyphicon glyphicon-minus"></span>
    </button>
<!-- end of ignored code -->
    </h3>
    <p class="list-group-item-text">
    Auteur : {{ book.author }}</p>
</div>

In Angular 7 when two buttons are nested the second one is ignored

1 Answers1