Angular Input property in Bootstrap modal is undefined

Question

I'm trying to implement a Bootstrap 4 modal inside an Angular 4 app. I'm not sure if having a component inside another component is influencing the behavior somehow, but I can't find a reason why an @Input parameter inside the modal component is always undefined. I want a table where the rows are clickable, and clicking on each one should open the details on a modal. Here is what I have:

Parent Component Template

<table class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th>Appraisal</th>
      <th>Last Modification</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let appraisal of appraisals" (click)="appraisalDetail(appraisal)">
      <td>
        <span>{{appraisal.name}}</span>
        <app-appraisal-modal *ngIf="appraisal" [selectedAppraisal]="appraisal"></app-appraisal-modal>
      </td>
      <td>{{appraisal.lastModifiedStr}}</td>
      <td class="{{appraisal.status === 'Pending' ? 'pending' : '' }}">{{appraisal.status}}</td>
    </tr>
  </tbody>
</table>

Parent Component Code

appraisalDetail(appraisal: Appraisal): void {
  const modalRef = this.modalService.open(AppraisalModalComponent);
  modalRef.componentInstance.selectedAppraisal = appraisal;
}

Child Template

<div *ngIf="selectedAppraisal">
 <div class="modal fade">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">{{selectedAppraisal.name}}</h4>
      <button type="button" class="close" 
        (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <span>{{selectedAppraisal.name}} detail goes here.</span>
    </div>
  </div>
</div>

AppModule

@NgModule({
declarations: [
AppComponent,
LoginComponent,
EmployeeComponent,
AppraisalComponent,
FeedbackReferenceComponent,
AppraisalModalComponent
  ],
   imports: [
AppRoutingModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService),
NgbModule.forRoot(),
BrowserModule,
FormsModule
  ],
  providers: [],
  entryComponents: [AppraisalModalComponent],
  bootstrap: [AppComponent]
})

To make it weirder, I can print the selected value on console just fine, but on debug time it comes as undefined, and the screen just goes grey (as if the modal was opened fine) but no modal is shown. Any ideas?

AVJT82 · Accepted Answer · 2017-05-08 17:37:26Z

2

Tested your code, and I think I found the culprit! Seems that bootstrap's css for class modal fade is causing this. So by removing it, your modal should display fine hopefully!

<div *ngIf="selectedAppraisal">
<!--<div class="modal fade"> -->   <----- HERE!
<div>   <--- replaced with
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">{{selectedAppraisal.name}}</h4>
      <button type="button" class="close" 
        (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <span>{{selectedAppraisal.name}} detail goes here.</span>
    </div>
  </div>
</div>

And I think your code should work just fine without having the child tag in the parent template... i.e, the following shouldn't be needed! (Check Plunker)

<app-appraisal-modal *ngIf="appraisal" [selectedAppraisal]="appraisal"></app-appraisal-modal>

Here is a Plunker to play with.

answered May 8, 2017 at 17:37

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manuel Santiago Yépez Over a year ago

You're completely right, the child tag wasn't needed as well. Thanks a lot :)

Collectives™ on Stack Overflow

Angular Input property in Bootstrap modal is undefined

Parent Component Template

Parent Component Code

Child Template

AppModule

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Parent Component Template

Parent Component Code

Child Template

AppModule

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related