Comment utiliser le code pour ouvrir un modal Angulaire 2?

Habituellement, nous utilisons data-target="#myModal" dans le <button> pour ouvrir un modal. Droit maintenant, j'ai besoin de codes pour contrôler le moment d'ouvrir le modal.

Si j'utilise [hidden] ou *ngIf pour le montrer, j'ai besoin de supprimer class="modal fade", sinon, le modal ne s'affichera jamais. Comme ceci:

<div [hidden]="hideModal" id="myModal">

Toutefois, dans ce cas, après la suppression de class="modal fade", le modal ne se fanera pas et n'a pas d'ombre dans le fond. Et ce qui est pire, il affichera en bas de l'écran au lieu de l'écran centre.

Est-il un moyen de garder class="modal fade" et utilisez le code pour l'ouvrir? 

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>
  • pourquoi utiliser [hidden] modale ?
  • Comme je l'ai dit, [masqué] et class="modal fade" ensemble modal ne sera jamais la même [hidden]="false". Si tu veux utiliser [caché], u besoin de supprimer class="modal fade"
InformationsquelleAutor Hongbo Miao | 2016-02-15
  1. 39

    C'est une façon que j'ai trouvée. Vous pouvez ajouter un bouton caché:

    <button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>

    Ensuite utiliser le code "cliquez" sur le bouton pour ouvrir le modal:

    document.getElementById("openModalButton").click();

    De cette façon peut garder le bootstrap style de le modal et le fondu dans l'animation.

    • Cela ne fonctionne pas au moment de la compilation et non pas avec des caractères d'imprimerie. Son genre de hackish
    • Le lien http://valor-software.com/ng2-bootstrap/#/modals résultats dans un 404 aujourd'hui...
    • merci, j'ai supprimé le lien, parce que de nos jours beaucoup de paquets sont disponibles, si la personne choisit d'utiliser un package.
    • Je vous remercie beaucoup. Plus cool de la solution. Je n'ai pas utiliser la 3ème partie de bootstrap dans angulaire. Je viens de copier des liens depuis le site officiel. Je n'aime pas trop le code de la jungle et j'ouvre en popup uniquement après que les données sont chargées à partir du backend.C'est exactement ce que je cherchais.
    InformationsquelleAutor Hongbo Miao
  2. 28

    Inclure jQuery comme d'habitude à l'intérieur des balises script dans index.html.

    Après toutes les importations, mais avant de déclarer @Composant, ajouter:

    declare var $: any;

    Maintenant, vous êtes libre de les utiliser jQuery n'importe où dans votre Angulaire 2 Tapuscrit code:

    $("#myModal").modal('show');

    Référence: https://stackoverflow.com/a/38246116/2473022

    • - Je faire de cette façon. Bootstrap 3 dépend quelque peu sur jquery.
    • La meilleure réponse sans l'installation d'une troisième partie du package. jQuery doit être installé lors de l'utilisation de Bootstrap, donc peut aussi bien l'utiliser dans le contrôleur, et cette voie est également dans le Bootstrap docs. Merci
    InformationsquelleAutor Moobie
  3. 11

    Moyen facile d'atteindre cet objectif dans angulaire 2 ou 4 (en Supposant que vous utilisez bootstrap 4)

    Component.html

    HTML:

    <button type="button" (click)="openModel()">Open Modal</button>

<div #myModel class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
        <h5 class="modal-title ">Title</h5>
        <button type="button" class="close" (click)="closeModel()">
            <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>

    Composant.ts

    import {Component, OnInit, ViewChild} from '@angular/core';

@ViewChild('myModal') myModal;

openModel() {
  this.myModal.nativeElement.className = 'modal fade show';
}
closeModel() {
   this.myModal.nativeElement.className = 'modal hide';
}
    • Pourriez-vous veuillez spécifier l'emplacement de votre solution de supposer l'utilisation de Bootstrap 4 au lieu de 3? Je suis l'aide de la version 3 et cela a fonctionné pour moi, de toute façon, je pense que j'ai manqué quelques détails et aimeriez en savoir plus 🙂
    • J'utilise le mot "en Supposant à l'aide de bootstarp 4", Juste au cas où précédentes ou à venir de la version de classe de bootstrap pour masquer et afficher est de changer ensuite, vous avez juste besoin de remplacer cette catégorie dans openModel et closeModel fonction.
    • Ne fonctionne pas pour moi. Ni l'extrait de code ni de code basé sur elle.
    InformationsquelleAutor Umang Patwa
  4. 6

    Voici ma pleine mise en œuvre de modal bootstrap angular2 composant:

    Je suppose que dans votre main index.html fichier (avec <html> et <body> tags) au bas de <body> tag vous avez:

      <script src="assets/js/jquery-2.1.1.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>

    modal.composante.ts:

    import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core';

declare var $: any;//this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
  selector: 'modal',
  templateUrl: './modal.html',
})
export class Modal implements AfterViewInit {

    @Input() title:string;
    @Input() showClose:boolean = true;
    @Output() onClose: EventEmitter<any> = new EventEmitter();

    modalEl = null;
    id: string = uniqueId('modal_');

    constructor(private _rootNode: ElementRef) {}

    open() {
        this.modalEl.modal('show');
    }

    close() {
        this.modalEl.modal('hide');
    }

    closeInternal() { //close modal when click on times button in up-right corner
        this.onClose.next(null); //emit event
        this.close();
    }

    ngAfterViewInit() {
        this.modalEl = $(this._rootNode.nativeElement).find('div.modal');
    }

    has(selector) {
        return $(this._rootNode.nativeElement).find(selector).length;
    }
}

let modal_id: number = 0;
export function uniqueId(prefix: string): string {
    return prefix + ++modal_id;
}

    modal.html:

    <div class="modal inmodal fade" id="{{modal_id}}" tabindex="-1" role="dialog"  aria-hidden="true" #thisModal>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" [ngClass]="{'hide': !(has('mhead') || title) }">
                <button *ngIf="showClose" type="button" class="close" (click)="closeInternal()"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <ng-content select="mhead"></ng-content>
                <h4 *ngIf='title' class="modal-title">{{ title }}</h4>
            </div>
            <div class="modal-body">
                <ng-content></ng-content>
            </div>

            <div class="modal-footer" [ngClass]="{'hide': !has('mfoot') }" >
                <ng-content select="mfoot"></ng-content>
            </div>
        </div>
    </div>
</div>

    Et exemple d'utilisation du client de l'Éditeur de composant:
    client-modifier-composant.ts:

    import { Component } from '@angular/core';
import { ClientService } from './client.service';
import { Modal } from '../common';

@Component({
  selector: 'client-edit',
  directives: [ Modal ],
  templateUrl: './client-edit.html',
  providers: [ ClientService ]
})
export class ClientEdit {

    _modal = null;

    constructor(private _ClientService: ClientService) {}

    bindModal(modal) {this._modal=modal;}

    open(client) {
        this._modal.open();
        console.log({client});
    }

    close() {
        this._modal.close();
    }

}

    client-edit.html:

    <modal [title]='"Some standard title"' [showClose]='true' (onClose)="close()" #editModal>{{ bindModal(editModal) }}
    <mhead>Som non-standart title</mhead>
    Some contents
    <mfoot><button calss='btn' (click)="close()">Close</button></mfoot>
</modal>

    Bien sûr du titre, showClose, mhead et mfoot ar paramètres facultatifs.

    • pourriez vous s'il vous plaît jeter un oeil à ce stackblitz.com/edit/angular-xesgxe je veux afficher un modal lorsque input est cliqué. Mais le compilateur ne peut pas trouver this.el.modal ou this.el.nativeElement.modal()
    • ai eu de travail à l'aide de $().modal. C'est dans l'une des réponses ci-dessous
    • Dans la méthode ngAfterViewInit et méthodes open/close j'ai en fait l'utiliser. Cependant, dans cette réponse, l'objectif était de fournir de travail "modal" composant (avec un exemple d'utilisation) - mais c'était il y a 2 ans donc peut-être maintenant il est obsolète.
    • Oui, je le vois maintenant. Je suis préoccupé par le mélange de jquery et de la quantité de code, mais c'est la seule que j'ai pu obtenir de travail. Si vous arriver à trouver une soln. ce qui est plus Anguleux, veuillez faire la mise à jour. Alors serait-I.
    • Pourriez-vous svp m'aider à comprendre pourquoi cette ligne est importante declare var $: any;. Je m'attendais à ce que je l'ai déjà inclus jquery dans mon projet, je devrais être en mesure d'utiliser $ n'importe où. Aussi, votre commentaire que becouse this override jQuery which was changed by bootstrap. Ne Bootstrap est venu avec sa propre mise en œuvre de JQuery?
    • Je suppose que j'ai trouvé la réponse. En faisant declare var $:any, nous déclarons une variable qui existe quelque part dans le JS - trouvé à partir d'une autre question, dans la
    • Je demande plus générale, la même question: stackoverflow.com/questions/50516233/...

    InformationsquelleAutor Kamil Kiełczewski
  5. 6

    Meilleure façon que j'ai trouvé. Mettre #lgModal ou de quelque autre nom de la variable dans votre modal.

    De votre point de vue:

    <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Large modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

    Dans votre composant

    import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
//todo: change to ng2-bootstrap
import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';
import {ModalDirective} from 'ng2-bootstrap/ng2-bootstrap';


@Component({
  selector: 'modal-demo',
  directives: [MODAL_DIRECTIVES, CORE_DIRECTIVES],
  viewProviders:[BS_VIEW_PROVIDERS],
  templateUrl: '/app/components/modals/modalDemo.component.html'
})
export class ModalDemoComponent implements AfterViewInit{

  @ViewChild('childModal') public childModal: ModalDirective;
  @ViewChild('lgModal') public lgModal: ModalDirective;

  public showChildModal():void {
    this.childModal.show();
  }

  public hideChildModal():void {
    this.childModal.hide();
  }

  ngAfterViewInit() {
      this.lgModal.show();
  }

}
    InformationsquelleAutor Judson Terrell
  6. 4

    Ci-dessous la réponse est en référence à la dernière ng-bootstrap

    Installer 

    npm install --save @ng-bootstrap/ng-bootstrap

    app.le module.ts

    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...

    NgbModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

    Composant Contrôleur

    import { TemplateRef, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-app-registration',
  templateUrl: './app-registration.component.html',
  styleUrls: ['./app-registration.component.css']
})

export class AppRegistrationComponent implements OnInit {

  @ViewChild('editModal') editModal : TemplateRef<any>; //Note: TemplateRef

  constructor(private modalService: NgbModal) { }

  openModal(){
    this.modalService.open(this.editModal);
  }

}

    Composant HTML

    <ng-template #editModal let-modal>

<div class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">Edit Form</h4>
  <button type="button" class="close" aria-label="Close" (click)="modal.dismiss()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div class="modal-body">

  <form>
    <div class="form-group">
      <label for="dateOfBirth">Date of birth</label>
      <div class="input-group">
        <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
        </div>
      </div>
    </div>
  </form>

</div>

<div class="modal-footer">
  <button type="button" class="btn btn-outline-dark" (click)="modal.close()">Save</button>
</div>

</ng-template>
    InformationsquelleAutor Arjun SK
  7. 1

    Crois que j'ai trouvé la bonne façon de le faire à l'aide de ngx-bootstrap. D'abord importer les classes suivantes:

    import { ViewChild } from '@angular/core';
import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

    À l'intérieur de la classe d'implémentation du composant ajouter un @ViewCild propriété, une fonction pour ouvrir le modal et ne pas oublier de configurer modalService comme une propriété privée à l'intérieur de l'composants constructeur de la classe:

    @ViewChild('editSomething') editSomethingModal : TemplateRef<any>;
...

modalRef: BsModalRef;
openModal(template: TemplateRef<any>) {
  this.modalRef = this.modalService.show(template);
}
...
constructor(
private modalService: BsModalService) { }

    Le " editSomething partie de la @ViewChild déclaration se réfère au modèle de composant fichier et son modale du modèle de mise en œuvre (#editSomething):

    ...
<ng-template #editSomething>
  <div class="modal-header">
  <h4 class="modal-title pull-left">Edit ...</h4>
  <button type="button" class="close pull-right" aria-label="Close" 
   (click)="modalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>

  <div class="modal-body">
    ...
  </div>


  <div class="modal-footer">
    <button type="button" class="btn btn-default"
        (click)="modalRef.hide()"
        >Close</button>
  </div>
</ng-template>

    Et finalement l'appel à la méthode pour ouvrir le modal où vous le souhaitez comme suit:

    console.log(this.editSomethingModal);
this.openModal( this.editSomethingModal );

    cette.editSomethingModal
    est un TemplateRef qui pourrait être illustré par la ModalService.

    Et le tour est joué! Le modal définis dans votre modèle de composant de fichier est indiqué par un appel à partir de l'intérieur de votre classe de composant de mise en œuvre. Dans mon cas, j'ai utilisé cette option pour afficher un modal à l'intérieur d'un gestionnaire d'événement.

    InformationsquelleAutor Torsten Barthel
  8. 1

    Je suis actuellement en utilisant Bootstrap 4.3 Angulaire 8 et que vous voulez ouvrir fenêtre modale par programme (sans réellement en cliquant sur quelques boutons que la démo officielle montre).

    Méthode suivante fonctionne pour moi:
    L'idée générale est de créer un bouton associé à une fenêtre modale.
    D'abord assurez-vous que lorsque vous cliquez sur ce bouton, il peut ouvrir la modale.
    Donnez à cette balise button un id à l'aide de hashtag, par exemple #hiddenBtn.
    Dans le volet fichier ts, import ViewChild from @angular/core et écrire le code ci-dessous:

    @ViewChild('hiddenBtn', {static: false}) myHiddenBtn;

    Après cela, chaque fois que vous voulez ouvrir cette fenêtre modale dans votre composant ts code, écrire de code suivant pour simuler cliquez sur le fonctionnement

    this.myHiddenBtn.nativeElement.click();
    • A travaillé pour moi. Merci!
    InformationsquelleAutor Wenhe Qi
  9. 0

    La Façon dont j'ai utilisé pour le faire sans beaucoup de codage est..
    J'ai le bouton caché avec le id="employeeRegistered"

    Sur mon .ts fichier je import ElementRef from '@angular/core'

    Puis après j'ai du processus tout sur mon (click) méthode de faire comme suit:

    this.el.nativeElement.querySelector('#employeeRegistered').click();

    puis le modal affiche comme prévu..

    InformationsquelleAutor edgar yovanni rivera nolasco
  10. 0

    Pour moi, j'ai dû settimeout en plus de @arjun-sk solution (lien), comme j'avais la erreur

    setTimeout(() => {
      this.modalService.open(this.loginModal, { centered: true })
    }, 100);
    InformationsquelleAutor Sudha
  11. 0

    Je suis l'aide d'une variable de contrôle d'afficher et de masquer et de s'appuyer sur le bouton pour ouvrir la modale

    ts code:

    showModel(){
  this.showModal = true;
}

    html:

    <button type="button" data-toggle="modal" data-target="#myModal" (click)="showModel()>Open Modal</button>

<div *ngIf="showModal" >
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>
    </div>
</div>

    InformationsquelleAutor jerry
  12. 0

    Nous pouvons utiliser jquery pour ouvrir modal bootstrap.

    ngAfterViewInit() { 
      $('#scanModal').modal('show'); 
}
    InformationsquelleAutor user2900572