如何在angular 2中设置模式弹出窗口的宽度和高度

如何在angular 2中设置模式弹出窗口的宽度和高度,angular,angular6,Angular,Angular6,我正在尝试将高度和宽度设置为模态。我怎么做 方式1: 添加输入属性绑定以向对话框添加动态宽度 <app-dialog [height]="200" [width]="200" [(visible)]="showDialog"> <h1>Hello World</h1> <button (click)="showDialog = !showDialog" class="btn">Close</button> </

我正在尝试将高度和宽度设置为模态。我怎么做

方式1:


添加输入属性绑定以向对话框添加动态宽度

<app-dialog [height]="200" [width]="200"   [(visible)]="showDialog">
    <h1>Hello World</h1>
    <button (click)="showDialog = !showDialog" class="btn">Close</button>
</app-dialog>
dialog.html


示例:

Chellapan:我还有一个疑问..我们如何在主体上显示模态的垂直滚动..如果它的高度更高?使用ngStyle添加滚动属性您可以在该模态中添加内容吗
<app-dialog [height]="200" [width]="200"   [(visible)]="showDialog">
    <h1>Hello World</h1>
    <button (click)="showDialog = !showDialog" class="btn">Close</button>
</app-dialog>
<div [@dialog] *ngIf="visible" class="dialog" [ngStyle]="{width:width+'px',height:height+'px'}">

    <ng-content></ng-content>
    <button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button>
</div>
<div *ngIf="visible" class="overlay" (click)="close()"></div>