как прикрепить модальное окно angular к нажатию кнопки

Question

дает мой первый go в разработке веб-приложений, а я использую angular. у меня есть "add-team-member-dialog.component.ts и связанные файлы html, css и spe c .ts в src / app. в основной форме у меня есть кнопка, которую я хочу иметь это модальное окно открывается, чтобы я мог получать вводимый текст от пользователя. Как мне получить эту функциональность? ниже находится главная страница, на которой находятся кнопки.

      </div>
  <div class="buttons">
    <button name="addTeamMembers" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Add Team Members</button>
    <button name="addRequirements" style="float:right;" class="btn btn-default" onclick="myFunction2()">Add Requirements</button>
    <!-- <button mat-button class="btn btn-default" (click)="myFunction($event)">Basic</button> -->
    <p id="saved"></p>
</div>

ниже - add-team-member- Файл dialog.component.ts

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

@Component({
selector: 'app-add-team-member-dialog',
templateUrl: './add-team-member-dialog.component.html',
styleUrls: ['./add-team-member-dialog.component.css']
})
export class AddTeamMemberDialogComponent implements OnInit {

 constructor() { }

 ngOnInit() {
    }

 }

ниже находится файл TS для app.component

  import { Component } from '@angular/core';
  import { AddTeamMemberDialogComponent } from './add-team-member-dialog/add-team- 
 member-dialog.component';

 @Component({ 
 selector: 'app-root',
 templateUrl: './app.component.html'
 })
 export class AppComponent { 
 form: any;
 projects: string[];
 submitted: boolean = false;
 teamMemberModal: boolean = false;

  constructor() {
  }

   ngOnInit() {
   this.projects = ['Project 1', 'Project 2'];
  }

   onSubmit(form: any)  {
   this.submitted = true;
   // this.teamMemberModal = false;
   this.form = form;
 }

  onShowModal()  {
  this.submitted = false;
  this.teamMemberModal = true;
  //this.form = form;
  }
}

Answer 1

Похоже, вы используете Angular Материал - этот ресурс должен помочь вам начать: https://material.angular.io/components/dialog/overview

В вашем Компоненте:

  constructor(private dialog: MatDialog) { }

  openTaskDialog() {
    /* 
      Creates your dialog modal
    */
    const dialogRef = this.dialog.open(YourDialogComponent);

    /* 
      Handles what happens after the modal dialog is closed
    */
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        // do something
      }
    });
  }

и в шаблоне:

<button mat-stroked-button (click)="openTaskDialog()"> Open me </button>

Важно, что вам необходимо создать файл YourDialogComponent. Простой пример:

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-your-task-dialog',
  template: `
    <h2>Insert your name here:</h2>
    <input type="text">
    <button (click)="onClose()">Cancel</button>
  `,
  styleUrls: []
})
export class YourDialogComponent {

  constructor(public dialogRef: MatDialogRef<YourDialogComponent>) { }

  onClose(): void {
    this.dialogRef.close();
  }
}

Answer 2

Самый простой способ - создать модальное окно как компонент, затем прикрепить его к главной странице и добавить директиву ngIf:

<app-modal *ngIf="condition"></app-modal>

, затем вам нужно добавить метод для переключения на TypeScript class:

toggleModal(e) {return !e} 

и прикрепите этот метод к кнопке.

Этот метод можно повторно использовать аналогично модальному.