角2ポップオーバー

Question

私はポップオーバーの中に入力ボックスとボタンを入れようとしています。 popoverが表示されるようにボタンを押すと、それが機能し、入力ボックスとボタンが表示されます。ポップオーバー内のボタンはそれを閉じるためのもので、それが機能します。問題は、私が入力ボックスを2回目にすることであり、ボタンは表示されません。コンポーネントクラスで

<button (click)="showPopover = !showPopover" class="btn">Open</button> 

<div *ngIf="showPopover" class="popOver"> 
    <input type="text"> 
    <button (click)="showPopover = false" class="btn">Close</button> 
</div> 

<div *ngIf="showPopover" class="modal" (click)="showPopover = false"></div> 

：

<button 
     class="btn btn-primary btn-lg" 
     id="firstNameError">First Name</button> 

<div id="firstNameErrorPop" class="hide"> 
     <input type="text" 
      class="form-control" 
      name="firstNameErrorPop" 
      #firstNameErrorPop="ngModel" 
      [(ngModel)]="test"/> 

      <button class="btn btn-primary maxWidth" (click)="closePopOver('firstNameError')">Save and close</button> 
</div> 

私の方法では達成するために、この

ngOnInit(){ 
    jQuery("#firstNameError").popover({ 
     placement: 'bottom', 
     html: 'true', 
     title : 'Type note below', 
     content: function(){ 
      return jQuery('#firstNameErrorPop').removeClass('hide'); 
     } 
    }).on('click', function(){ 
     //jQuery('#firstNameErrorPop').removeClass('hide'); 
     jQuery("#firstNameError").popover('toggle'); 
    }); 
} 

closePopOver(element){ 
    console.log(element); 
    //jQuery('#'+element+'Pop').addClass('hide'); 
    jQuery('#'+element).popover('hide'); 
} 

Answer 1

角度の方法のように見えるあなたのCSSで

showPopover= false; 

.modal { 
     position: fixed; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     background-color: rgba(0, 0, 0, 0.5); 
     z-index: 999; 
} 

.popOver { 
    z-index: 1000; 
    position: fixed; 
    right: 0; 
    left: 0; 
    top: 20px; 
    margin-right: auto; 
    margin-left: auto; 
    min-height: 200px; 
    width: 90%; 
    max-width: 520px; 
    background-color: #fff; 
    padding: 12px; 
} 

とコンポーネントのデコレータにこれを追加したアニメーションであなたのポップオーバーを表示する：

animations: [ 
     trigger('popover', [ 
      transition('void => *', [ 
      style({ transform: 'scale3d(.3, .3, .3)' }), 
      animate(100) 
      ]), 
      transition('* => void', [ 
      animate(100, style({ transform: 'scale3d(.0, .0, .0)' })) 
      ]) 
     ]) 
     ] 

とdont'tインポートすることを忘れ：

import { trigger, state, style, animate, transition } from '@angular/animations'; 

それを使用する：

<div [@popover] *ngIf="showPopover" class="popOver">