如何制作 angular 弹出窗口？

Question

我想创建一个 angular 对话框或模式 popup.when 我按下一个按钮。在那个弹出窗口中，我展示了一个表格。

我的 html 按钮代码：

<button class="btn btn-outline-primary"  type="submit" (click)="setting()" style="border-radius:40px;margin-left: 15px;"
color="primary"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></button>

我希望在弹出窗口中显示的表单的 html 代码：

<div style="margin-left: 50px;margin-right: 80%;margin-top: 1%; width: 100%;">
    <h3>
        Type Form
    </h3>
    <div>
        <form>
            <table>
                <div>
                    <tr>
                        <td>
                            <mat-form-field>
                                <mat-label>Name</mat-label>
                                <input matInput placeholder="Name"  autocomplete="off" required>
                            </mat-form-field>
                        </td>
                     </tr>
                </div>
            </table>
      
        </form>
    </div>
</div>

请告诉我是否有任何解决方案。请在 ts.

中添加 click()

Answer 1

您需要在 ng-template 标签中设置对话框的内容，并像那样设置引用

<ng-template #dialogRef>your form</ng-template>

stackblitz 上有一个很好的例子：

如何制作 angular 弹出窗口？

How to make an angular popup?

html

modal-dialog

typescript

angular-material

angular