CODEWITHSUNDEEP
angularangular5
Tim
Tim

Reputation: 1023

reusable modal with dynamic content in angular5

I have a reusable modal component I use with several other components.

The modal framework I'm using is from ng-bootstrap (NgbActiveModal).

The modal just lists a set of strings that come from whichever parent component called it.

However, I want the modal to display differently depending on the parent component. For example, I may need it to display a table instead of a list. I've kludged it this way:

<div class="modal-body">
  <div *ngIf="data.encoding !== undefined">
    <p>Hello {{data.name}}. These are your badly encoded words:</p>
    <ul><li *ngFor="let item of data.words">{{item}}</li></ul>
  </div>
  <div *ngIf="data.urls !== undefined">
    <p>Hello {{data.name}}. These are your broken urls:</p>
    <ul><li *ngFor="let item of data.urls">{{item}}</li></ul>
  </div>

That works, but it sure is ugly and completely dependent on data items from the parent. What is the angular way to do this correctly?

Upvotes: 2

Views: 3893

Answers (1)

Sia
Sia

Reputation: 211

you can use input fields I believe. So in modal component something like:

Input() content;

And then simply: 

const modal = this.modalService.open(ModalComponent);
modal.componentInstance.content = 'something here';

Add the desired text, or something while opening modal.

Upvotes: 5

Related Questions