1

I'm currently doing some frontend work in an application that is using angular-cli which I'm not all that used to. I've finished up most of the work but I'm trying to get a forum that currently loads above a table into a modal.

Currently, it comes from another linked component and loads in at the top of the html file like so.

<app-data-edit *ngIf="editEnabled" (editComplete)="onFinish($event)" [dataSet]="dataToEdit"></app-data-edit>

I loaded ngx-bootstrap into the project and got everything all set up. Following their documentation, specifically the component example I created a simple button and made it open a modal. So good so far, I can make a modal pop up with basic content in the modal body. Then I tried something like this:

@Component({
    selector: 'modal-content',
    template: `
      <div class="modal-header">
        <h4 class="modal-title pull-left">{{title}}</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="bsModalRef.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <app-data-edit *ngIf="editEnabled" (editComplete)="onFinish($event)" [dataSet]="dataToEdit"></app-data-edit>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
       </div>'
})
export class ModalContentComponent {
  title: string;
  constructor(public bsModalRef: BsModalRef) {}
}

And it comes back with no results. Am I missing something?

Mathematical
  • 49
  • 5
  • 1
    What do you mean when you say `comes back with no results`? Also it would help a lot if you'd created a reproduction of this issue on Plunkr: https://plnkr.co/edit/0NipkZrnckZZROAcnjzB?p=preview or StackBlitz: https://stackblitz.com/edit/ngx-bootstrap?file=app%2Fapp.module.ts – IlyaSurmay Nov 08 '17 at 10:18
  • I'll create that this morning - what I meant buy no results is that I'm not getting anything back in the body when I try to use app-data-edit from the .ts file. – Mathematical Nov 08 '17 at 12:14
  • On first try it looks like the application is too much to properly get in a Plunkr - I'm having issues cutting it down. The base of the issue is that when I place the line in the HTML file - it shows up fine. I'm not sure what I would need to do or what I am missing to make it actually work when I'm writing it in the template portion of a component. – Mathematical Nov 08 '17 at 13:26

0 Answers0