增大模态的大小

时间:2019-07-30 10:18:51

标签: angular ngx-bootstrap

目标:
使用类“ modal-lg”

将模式作为大型模式

问题:
当我在不同地方尝试使用语法代码“ modal-lg”时,不知道如何解决。

信息:
*我是角度新手
*使用VS代码和ngx-bootstrap

谢谢!

https://stackblitz.com/edit/angular-nested-component-modal-ngx-bootstrap-not-working-ap7wnp

2 个答案:

答案 0 :(得分:0)

我已经修改了您提供的StackBlitz链接上的代码。

以下是 app.component.ts 文件中的更改

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</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-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-body">
          <i>I want Full Name here. First name I am able to get, but last name i am not able to get form nested model here</i>
          <p>&nbsp;</p>
          Full name: {{person.fname}}
          <p>&nbsp;</p>
          <input type="text" name="fname" placeholder="first Name" [(ngModel)]="person.fname"     #fname="ngModel">
          <p>&nbsp;</p>
          <button type="button" class="btn btn-primary" (click)="openModalWithComponent()">Open Modal to enter last name</button>
      </div>
    </div>
  </div>    
</ng-template>

希望对您有帮助

答案 1 :(得分:0)

内存中的ngx中有一个尺寸代码。 LG,MD,SM。设置它,一切正常。