How to open model from ts file of angular?-CodePudding

I try to open the model on my page is load

HTML

<ng-template #content let-c="close" let-d="dismiss">
      <div >
        <h4  id="modal-basic-title">Hi there!</h4>
        <button type="button"  aria-label="Close" (click)="d('Cross click')"></button>
      </div>
      <div >
        <p>Hello, World!</p>
      </div>
      <div >
        <button type="button"  (click)="c('Save click')">Save</button>
      </div>
    </ng-template>
    
    <button  [hidden]="true" (click)="open(content)" data-target="#varify_warning">Launch demo modal</button>

TS file

ngOnInit(): void 
  {
    document.getElementById("varify_warning")?.click();
  }

But the model didn't open?

I want to trigger the click() event on the Launch demo modal button from ngInit()

CodePudding user response：

Open ngbModal on button click

On your .ts file, add this:

  open(content: any) {
    this.modalService.open(content);
  }

And in your .html file, add this:

    <button (click)="open(content)">Open modal</button>
    <ng-template #content let-c="close" let-d="dismiss">
       modal content goes here
    </ng-template>

Open ngbModal on ngOnInit

On your .ts file, add this:

        @ViewChild("content",{static:true}) content:ElementRef;
        ngOnInit(): void {
            this.modalService.open(this.content);
        }

And in your .html file, add this:

    <ng-template #content let-c="close" let-d="dismiss">
       modal content goes here
    </ng-template>