CODEWITHSUNDEEP
cssangularbootstrap-4ng-bootstrap
lemoncodes
lemoncodes

Reputation: 2421

Customizing a ng-boostrap modal with component as content

I've been trying to customize a modal with a component passed as content. However, I can't seem to make it work. It just displayed a backdrop and the modal itself is not displaying. Watch this forked stackblitz code for more detail.

Basically I just need to customize the width of the modal. In the guide, it passed the content template reference as described in this section. But in my case, I am not passing a TemplateRef but a Component.

Upvotes: 0

Views: 194

Answers (1)

SeleM
SeleM

Reputation: 9658

Remove the <ng-template let-modal> wrapper (and its closing half) from your NgbdModalContent's template.

@Component({
  selector: 'ngbd-modal-content',
  template: `
      <div class="modal-header">
        <h4 class="modal-title">Hi there!</h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Hello, {{name}}!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
      </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

Upvotes: 1

Related Questions