Custom dialogs don't show up when triggered from a ListView item on Android

[tsonevn]

From @victorhurdugaci on July 4, 2016 20:11

1. tns create DialogTest --ng

2. Change app.component.ts to:

   import {Component} from "@angular/core";
   import {ModalDialogService, ModalDialogOptions, ModalDialogHost, ModalDialogParams} from "nativescript-angular/modal-dialog";
   import * as dialogs from "ui/dialogs";
   
   @Component({
       selector: "my-app",
       directives: [ModalDialogHost],
       providers: [ModalDialogService],
       template: `
       <StackLayout modal-dialog-host>
           <Button text="Show" (tap)="onTap()"></Button>
           <ListView [items]="items" class="small-spacing" >
               <template let-item="item" > 
                   <GridLayout columns="*, *" rows="auto">
                       <Label class="scoreline-text" [text]="item" col="0"></Label>
                       <Button text="Show" (tap)="onTap()" col="1"></Button>
                   </GridLayout>
               </template>
           </ListView>
       </StackLayout>`
   })
   export class AppComponent {
       constructor(private modalService: ModalDialogService) {
       }
   
       public get items(): string[] {
           return ['a', 'b', 'c'];
       }
   
       public onTap() {
           console.log('show dialog');
           this.modalService.showModal(MyDialog, {})
       }
   }
   
   
   @Component({
       template: `<Label text="Hello"></Label>`
   })
   class MyDialog {
       constructor(private params: ModalDialogParams) { }
   }

3. tns livesync android --watch

4. When the app starts tap the first Show button that's outside of the list view and notice that the dialog shows up.

5. Try tapping one of the buttons in the list view and notice that the dialog doesn't show up even thought it calls in the same event handler (you can even see the console log output).

• CLI: 2.1.0
• core modules: 2.1.0
• tns-android: 2.1.1
• OS: Win 10 x64
• Emulator: Genymotion

Copied from original issue: NativeScript/NativeScript#2416

[tsonevn]

Hi @victorhurdugaci,
I reviewed the code snippet and confirm that this is a global issue for NativeScript Angular projects, while you are using Button in a ListView and want to show Custom Dialog. I am attaching my sample project, which could be debugged locally.

SampleProject

[vakrilov]

This issue is the same as #333. It is resolved in #334 - will be included in the @next builds.