Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal - not open different modal child in same parent

See original GitHub issue

I have created two different modal component end I have insert them in the same parent component, but when i click on the open button the same modl is opened (the first one).

my parent tempalte:

<div class="container">
   <div class="btn-group btn-lg">
       <app-accounting-modal [openButton]="modifyButton"></app-accounting-modal>
       <app-accountingDelete-modal [openButton]="deleteButton"></app-accountingDeletmodal>
   </div>		
</div>

my first modal (app-accounting-modal) tempalte:

<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div>{{Title}}</div>
                <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                    <span aria-hidden="true">&times;</span>
                 </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</ng-template>  
<button type="button"  class="btn btn-default"  (click)="open(content)">{{openButton}}</button>
<ng-template #content let-c="close" let-d="dismiss"> 
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div>{{Title}}</div>
                <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
                    <span aria-hidden="true">&times;</span>
                 </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                
            </div>
        </div>
    </div>
</ng-template>  
<button type="button"  class="btn btn-default"  (click)="open(content)">{{openButton}}</button>

my second modal (app-accountingDelete-modal) template:

<ng-template #modal let-a="close" let-b="dismiss"> 
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div>{{Title}}</div>
                <button type="button" class="close" aria-label="Close" (click)="b('Cross click')">
                    <span aria-hidden="true">&times;</span>
                 </button>
            </div>
            <div class="modal-body">
                <p>Attenzione! Questo elemento {{accountingId}} verrà cancellato definitivamente</p>
            </div>
            <div class="modal-footer">
                <button type="button"  class="btn btn-default"  (click)="ok()">Ok</button>
                <button type="button"  class="btn btn-default"  (click)="cancel()">Cancel</button>
            </div>
        </div>
    </div>
</ng-template>  
<button type="button"  class="btn btn-default"  (click)="open(modal)">{{openButton}}</button>

the code of twice modals is approximately the same:

@Component({
  selector: 'app-accountingDelete-modal',
  templateUrl: '../template/accounting-modal.component.html',
  encapsulation: ViewEncapsulation.None,
  providers: [NgbModal]
})
export class AccountingDeleteModal {
    @Input() title: string;
    @Input() accountingId: number;
    @Input() openButton: string;
    @Output() accountingDelete: EventEmitter<string> = new EventEmitter();
    constructor(private modalService: NgbModal) {}
    
    open(modal) {
        console.log(modal)
        this.modalService.open(modal);
    }
... Other specifics methods
}

I have imported NgbModule.forRoot() in my app.module I had the same issue with two different datepicker in the same page;

angular: 4.1.3 ng-bootstrap: 1.0.0-alpha.26 Bootstrap 4.0.0-alpha.6