Блог

Я хочу создать диалоговое окно angular или модальное всплывающее окно.когда я нажимаю кнопку. В этом всплывающем окне я показываю форму.

Мой 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> 
  

Пожалуйста, скажите мне, есть ли какое-либо решение. Пожалуйста, добавьте click() в ts.

Вам нужно установить содержимое диалогового окна в теге ng-template и установить ссылку, подобную этой

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

на stackblitz есть хороший пример :