0

New to Angular and I have the need to open a detail view in a modal popup. I have not found much on the subject except for the answer to the question below therefore it may be a simple matter I am just over looking. I am not using ngxBootstrap.

Question: Load self in modal - Angular component

I have configured our Dashboard (sar-dashboard) to display a modal when the user clicks an element from a child component (sar-list) using the techniques found here: http://www.agiratech.com/angular-typescript-modal-window/

and using the EventEmitter as shown here: https://angular.io/guide/component-interaction#parent-listens-for-child-event

I have declared the modal in the dashboard HTML and included the event in the selector for the child component (sar-list)

<app-sar-list (openModal)="openModal($event)"></app-sar-list>
...
<div class="backdrop" [ngStyle]="{'display':display}"></div> <div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':display}">

The child (sar-list) declares the output event @Output() openModal = new EventEmitter<number>();

and the parent (sar-dashboard) captures it to set the display: block so modal will show. This all works fine openModal(id: number) { this.display = 'block'; }

What I need now is to grab the injected "id: number" so I can call the service and load details based on the id. I created a new component (sar-quickview) and add the selector to the modal however it renders first before the click event and therefore no data is ever loaded.

<div class="modal-body"><app-sar-quickview [id]="sarId"></app-sar-quickview></div>

How to load the detail from database once the modal is made visible based on user choice?

Note: this is my first post so I'm learning the formatting still.

Adam Murray
  • 33
  • 1
  • 7

1 Answers1

0

Solved! I was able to utilize the solution from @StephenPaul to the following question Angular 2.0 and Modal Dialog!

The modal component selector is placed in the parent as expected but I was introduced to the #modal which allowed the parent to invoke the pulic Show()/Hide() functions of the modal component. Therefore I just passed in the selected id and voila data loads and displays.

<ul class="list-group">
    <div *ngFor="let sar of sars">
        <div class="block">
            <a class="overlay" routerLink="/sar-detail/{{sar.sarSid}}" title="{{sar.title}} Details"></a>
            <div class="inner">                
                {{sar.sarSid}} via {{sar.title}}
                <a (click)="modal1.show(sar.sarSid)" 
                    title="SAR Quick View" 
                    style="cursor: pointer">
                    <span class="glyphicon glyphicon-eye-open pull-right" aria-hidden="true"></span>
                </a>               
            </div>
        </div>
    </div>
</ul>
<app-sar-quickview #modal1>
    <div class="app-modal-header">         
        <button type="button" class="close" aria-label="Close" (click)="modal1.hide()"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Suspicious Activity Report Quick View</h4>
    </div>
    <div class="app-modal-body">
        <!-- Whatever content you like, form fields, anything
        <input type="text"> -->
    </div>
    <div class="app-modal-footer">
        <button type="button" class="btn btn-default" (click)="modal1.hide()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</app-sar-quickview>

and the modal component markup

<div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
  [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <ng-content select=".app-modal-header"></ng-content>
      </div>
      <div class="modal-body">
        <ng-content select=".app-modal-body"></ng-content>

modal component.ts

export class SarQuickviewComponent implements OnInit {
  sar: SAR;
  public visible = false;
  private visibleAnimate = false;

  constructor(private sarService: SARService, private route: ActivatedRoute, private location: Location) { }

  ngOnInit() {
    // this.getSarDetail();
  }

  public show(id: number): void {

    // load sar data before making it visible
    console.log('selected id: ' + id);
    this.getSarDetail(id);

    // now show the modal
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }

  getSarDetail(id: number): void {
    // invoke service to fetch sar details based on id
    this.sarService.getSARDetailForId(id)
      .subscribe(sar => {
        this.sar = sar;
        console.log(this.sar);
      });
  }

}
Adam Murray
  • 33
  • 1
  • 7