How to open model from ts file of angular?

Question

I try to open the model on my page is load

HTML

<ng-template #content let-c="close" let-d="dismiss">
      <div class="modal-header">
        <h4 class="modal-title" id="modal-basic-title">Hi there!</h4>
        <button type="button" class="btn-close" aria-label="Close" (click)="d('Cross click')"></button>
      </div>
      <div class="modal-body">
        <p>Hello, World!</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Save</button>
      </div>
    </ng-template>
    
    <button class="btn btn-lg btn-outline-primary" [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()

Answer 1

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>