"Looking to access a model from a TypeScript file in Angular - here's how to

Question

"Looking to access a model from a TypeScript file in Angular - here's how to

When my page loads, I am attempting to open a modal model. However, despite my efforts, the model does not open. I need to be able to trigger the click() event on the Launch demo modal button from ngInit()

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();
  }

angular typescript angular-bootstrap ngoninit

Answer 1

Answer №1

Launch ngbModal with a Button Click

In your .ts file, include the following code:

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

In your .html file, add the button and modal template:

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

Trigger ngbModal on Component Initiation

In your .ts file, add the following:

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

Include the modal template in your .html file as follows:

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

Answer 2

Launch ngbModal with a Button Click

In your .ts file, include the following code:

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

In your .html file, add the button and modal template:

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

Trigger ngbModal on Component Initiation

In your .ts file, add the following:

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

Include the modal template in your .html file as follows:

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

"Looking to access a model from a TypeScript file in Angular - here's how to

Answer №1

Launch ngbModal with a Button Click

Trigger ngbModal on Component Initiation

Similar questions

Angular does not update the progress bar

The "ng2-CKEditor" package is experiencing compatibility issues with TypeScript in Angular 2

Is it possible to release a typescript package without including the ts files in the

What issue are we encountering with those `if` statements?

Modular Angular Component

Generate a configuration file that allows for the reading and storage of modifications

How can I verify the existence of a route in Angular 2?

Utilize regular expressions to substitute a specific string of text with an HTML tag

What is the best approach for ensuring optimal maintainability when components X and Y rely on shared data?

The parameter type 'Object' cannot be assigned to the parameter type 'string'

Why won't my boolean value in the Angular service reflect in the HTML code?

Experience the power of React TypeScript where functions are passed as props, but access is restricted

Creating one-to-one relationships in sequelize-typescript can be achieved by setting up multiple foreign keys

Creating a TypeScript frozen set: A step-by-step guide

Understanding how to handle POST data from an Angular2 application in PHP

Using Firebase with Angular 4 to fetch data from the database and show it in the browser

angular component that takes a parameter with a function

Exploring the depths of routing within a maze of interconnected modules

What is the best way to iterate through an enum?

Tips for showing data from an hour ago in Angular