CODEWITHSUNDEEP
angulartypescriptmodal-dialogngx-chips
20.miles
20.miles

Reputation: 189

Angular2+ Open Modal when item selected from ngx-chips (tag-input)

I would like to open a modal window when I select one of the tags present in my tag-input-dropdown.

This is my code:

<div class="force-to-the-bottom">
  <tag-input [ngModel]="[]" [onAdding]="onAdding">
    <tag-input-dropdown
      [autocompleteItems]="items"
      [showDropdownIfEmpty]="true"
      [dynamicUpdate]="false"
    >
    </tag-input-dropdown>
  </tag-input>
</div>


<ng-template #content1 let-modal>
    <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">My Modal</h4>
        <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <form>
        <div class="form-group">            
            <div class="input-group">
                <input  name="modal-conf" type="text" class="form-control">                
            </div>            
        </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-danger">Done</button>
    </div>
</ng-template>

My input tag has the function call [onAdding] = "onAdding" which calls the opening of the modal window:

import { Component, OnInit, TemplateRef, ViewChild, } from '@angular/core';
import { Observable, of } from 'rxjs';
import { NgbModal, ModalDismissReasons, } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('content1', {static: false}) content1 !: TemplateRef<any>;
  name = 'Angular';
  closeResult: string;
  public items = [
    {display: 'Pizza', value: 1},
    {display: 'Pasta', value: 2},
    {display: 'Parmesan', value: 3},
  ];

  public onAdding(tag: any): Observable<any> {    
    console.log(tag);
    const confirm = window.confirm('Do you really want to add this tag?');                

    this.modalService.open(this.content1, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {     
        this.closeResult = `Closed with: ${result}`;      
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;      
    });

    return of(tag);        
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

  constructor(private modalService: NgbModal) { }
}

I don't understand why, the modal window does not open. This is my StackBlitz: https://stackblitz.com/edit/angular-ye2n9g

Can someone help me?

Upvotes: 1

Views: 890

Answers (1)

Virendra Maheta
Virendra Maheta

Reputation: 77

You need to add (onSelect) method in tag-input selector and then you can open modal popup in it's definition.

Upvotes: 1

Related Questions