How to create a separate modal component in Angular without relying on ng-modal

Question

How to create a separate modal component in Angular without relying on ng-modal

I am facing an issue with ComponentB, which contains HTML code for a Bootstrap modal. I want to open ComponentB from ComponentA.

Although the component is getting loaded when inspected, the popup modal does not appear on the UI.

<app-root>
  <app-a>
    <app-b></app-b>
  </app-a>
</app-root>

NOTE: There is no CSS applied to either of the components.

ComponentA.html:

<button (click)="popup()">Open</button>
<app-b *ngIf="openModal" [openModal]="true" ></app-b>

ComponentA.ts:

 popup(){
    this.openModal = true;
}

componentB.html:

<div *ngIf="openModal" id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

componetb.ts:

@Input('openModal') openModal : boolean

Thank you for your help!

angular typescript

Answer 1

Answer №1

If you want to display a modal, remember to include the show and d-block classes.

In your componentB.html, update your modal div as follows:

<div *ngIf="openModal" id="myModal" class="modal fade show d-block" role="dialog">

Here is a sample on stackblitz

However,
It is recommended to use ngx-bootstrap or refer to the official Bootstrap documentation for proper guidance on manipulating classes in modals.

Answer 2

If you want to display a modal, remember to include the show and d-block classes.

In your componentB.html, update your modal div as follows:

<div *ngIf="openModal" id="myModal" class="modal fade show d-block" role="dialog">

Here is a sample on stackblitz

However,
It is recommended to use ngx-bootstrap or refer to the official Bootstrap documentation for proper guidance on manipulating classes in modals.

Answer 3

Answer №2

Transform a regular component into a modal by creating a custom component, such as ModalComponent. In the constructor, remember to include the variable:

public activeModal: NgbActiveModal

To close an open Modal, use the following command: this.activeModal.close(). Within the calling or parent component, declare two variables: a reference to the modal component modalRef: NgbModalRef, and in the constructor, add: private modalService: NgbModal. To invoke the modal component, utilize:

this.modalRef = this.modalService.open(ModalComponent);

. You can also pass any necessary variables to the Modal component like so:

this.modalRef.componentInstance.variable = variableContent;

Remember to include the Modal component in the entryComponents Array within the app.module file:

entryComponents: [ModalComponent]

Answer 4

Transform a regular component into a modal by creating a custom component, such as ModalComponent. In the constructor, remember to include the variable:

public activeModal: NgbActiveModal

To close an open Modal, use the following command: this.activeModal.close(). Within the calling or parent component, declare two variables: a reference to the modal component modalRef: NgbModalRef, and in the constructor, add: private modalService: NgbModal. To invoke the modal component, utilize:

this.modalRef = this.modalService.open(ModalComponent);

. You can also pass any necessary variables to the Modal component like so:

this.modalRef.componentInstance.variable = variableContent;

Remember to include the Modal component in the entryComponents Array within the app.module file:

entryComponents: [ModalComponent]

How to create a separate modal component in Angular without relying on ng-modal

Answer №1

Answer №2

Similar questions

The functionality of d3 transition is currently non-existent

Redirect to a new page following a toastr notification in an Angular application

Problem with Packaging Angular and Spring Boot Applications

A guide to updating a table in Angular using an API response

IntelliJ is unable to locate the scss import when using the includePaths option in stylePreprocessorOptions

Using method parameters to pass multiple observer values

Error: "the cart variable in the ctx object has not been defined"

Show varying mat-options based on the selected value of another mat-select

Angular: handling asynchronous errors when no promise is utilized within a subscription

Angular 2 and Strophe XMPP Integration

As I attempted to install TypeScript on my MacBook Pro M2, I encountered errors after entering a command. What steps should I take next to resolve this issue?

In Ionic 2, any modifications made to the data model will only be reflected in the user interface after there is

Create an Angular library that incorporates a TypeScript dependency into the compilation process

Leverage the event handler within a React Component when working with TSX tags

Losing scope of "this" when accessing an Angular2 app through the window

Implement dynamic routerLink binding with Angular 11

Conduct surveillance on the service function call within the constructor

Angular click switch Component keeps track of its previous state

Can a string array be transformed into a union type of string literals?

Only the (click) event is functional in Angular, while the (blur), (focus), and (focusout) events are not functioning