Transmit information to a modal by utilizing the ngx-bootstrap modal component

I have been encountering issues while trying to use angular 8 and ngx-bootstrap to open modals and pass data from parent to modal. It is not working as expected. Can anyone provide guidance on what steps I should take to resolve this issue? Here is the link to my stackblitz demo and code

HTML

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open 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"&rt;&times;</span>
    </button>
  </div>
  <div class="modal-body">
    Just a modal with a {{initialState.data1}}
  </div>
</ng-template>

Component

openModal(template: TemplateRef<any>) {
    const initialState = {
    data1 : 'foo'
}
    this.modalRef = this.modalService.show(template, {initialState});
  }

Answer №1

If you want to implement this

HTML

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Displaying Modal Data : {{ modalService.config.initialState.data1 }}</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true"&rt;&times;</span>
    </button>
  </div>
  <div class="modal-body"&rt;
    This is a modal.
  </div>
</ng-template>

Component

openModal(template: TemplateRef<any>) {
    const userDetails = {
        data1 : 'foo'
      };
    this.modalRef = this.modalService.show(template, {
      initialState : userDetails
    });
  }

Check out this DEMO for a live example.

Answer №2

I was able to successfully implement it using the following method:

<ng-template #template>
  <div class="modal-header">
  <h4 class="modal-title pull-left">Modal for data : {{ data1 }}</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-body">
    This is a modal.
  </div>
</ng-template>

Additionally:

openModal(template: TemplateRef<any>) {
  const initialState = {
    data1 : 'foo'
  };
  this.modalRef = this.modalService.show(template, {initialState});
}

Credit goes to:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 - update browsing history by replacing instead of adding to it

Is it possible to replace the history instead of pushing a new one in Angular 2's new router (rc.1)? For instance, suppose I am in a question list (/questions), then open a new modal in a new route (/questions/add). After adding a new question, I nav ...

When Typecasted in Typescript, the result is consistently returned as "object"

Consider a scenario where there are two interfaces with identical members 'id' and 'name': export interface InterfaceA { id: number; name: string; //some other members } export interface InterfaceB { id: number; nam ...

Starting the process of configuring Angular 5 with Express using TypeScript

Hi there! I am looking to create a fresh application using angular 5 and express (typescript for express as well). Do you have any helpful guides or tips that could assist me in reaching my objective? Appreciate all the help, Giuseppe ...

Stop the instantiation of type alias

Is there a way to restrict the creation of an instance of a type alias, such as ValidatedEmail? type ValidatedEmail = { address: string; validatedOn: Date } Let's say we have functions validateEmail and sendEmail. const validateEmail = (email): Valid ...

Organizing objects into arrays in Node.js

I have an array and I need to concatenate an object after the array. Here is my array: const users = [ {name: "Joe", age: 22}, {name: "Kevin", age: 24}, {name: "Peter", age: 21} ] And here is my object: ...

Angular projects experience issues with importing date-fns which results in failing Jest tests

After updating one of my Angular projects to version 13, I encountered strange errors while running unit tests in the project. To better understand this issue, I created a simple example within a new Angular project: import { format } from 'date-fns& ...

Guide to sending a request to a third-party API using Node.js and Express.js with the 'Authorization: Basic' header

Attempting to utilize the UDEMY API, each request necessitates the inclusion of Authorization: Basic + keys header. The API documentation specifies: curl --user {YOUR_CLIENT_ID}:{YOUR_CLIENT_SECRET} https://www.udemy.com/api-2.0/courses/ curl -H "Au ...

Guide to customizing the appearance of a component's host element on-the-fly

For instance: https://stackblitz.com/edit/angular-mkcfsd In my project, I have an icon component called app-icon which dynamically takes a path and inserts it into an SVG viewbox. I extract the height and width of the path, then set the SVG to match those ...

VS Code sees JavaScript files as if they were Typescript

I have recently delved into the world of Typescript and have been using it for a few days now. Everything seems to be working smoothly - Emmet, linting, etc. However, I've encountered an issue when trying to open my older JavaScript projects in VS Cod ...

How should the Facebook avatar be displayed using AngularFire in a correct manner?

I am working on an app where I want to display the avatar of the logged-in Facebook user, but I'm struggling to find a clean solution. To show the user's avatar, you need to have their user_id and accessToken. While user_id can be obtained using ...

Is it possible for ngIf to only hide the div without impacting the overall layout?

I utilize a left side menu and main content. <div class="row"> <div ngIf="loginUser" class="sidebar col-md-3> ....... </div! <div class="main col-md-9> ....... </div> </div> It is hidden when ...

Using TypeScript to pass the text field ID to a function for clearing the text field with a button

I am looking for a way to improve the functionality of my web page featuring several buttons that will clear different text boxes on the same line. Currently, I am using separate functions for each button, but my goal is to streamline this process by utili ...

Unlimited requests sent to the server while subscribing to an observable on HTTP

I am currently enhancing an Angular2 website with a feature to display the name of the user who is logged in. While I have been successful in retrieving the necessary information from the back-end service, I am encountering an issue where requests are sen ...

Setting up TypeScript in an Angular 2 project and integrating Facebook login

Currently, I am in the process of familiarizing myself with Angular 2 and typescript. Although things have been going smoothly so far, I have hit a roadblock while attempting to implement a Facebook login message. In my search for a solution, I stumbled up ...

Incorporating Angular 11, Typescript, Node.js, and MySQL into the project, a feature is implemented where a button is displayed in the home component based on the Boolean value of 'mysql' only if

I am currently working on adding a new feature to my application that involves checking for specific domain email addresses during the registration process. Based on the email domain, I want to display a different button on the 'home' page for th ...

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

I'm currently working on creating a basic login form for users to access a website, where I plan to store their session data in a session cookie. The express-session documentation provides the following example for setting it up: app.post('/login ...

Issues with routing device

I'm experiencing an issue with the navigation on my app. When I click on the button, nothing happens except for some weird behavior. However, when I use <router-outlet></router-outlet>, it works perfectly. Here is my app.module.ts file: ...

Tips for Sending Request Parameters to Angular Application

My Angular app, created with Angular CLI, is hosted on Heroku using express. The setup looks like this: const express = require('express'); const app = express(); // Serve the static files in the dist directory app.use(express.static(__dirname + ...

Launching npm using the command "npm run protractor" results in console errors being thrown upon completing the test

Recently, we made the decision to streamline the installation process of Protractor on local machines by specifying it in package.json rather than installing it individually with the -g flag. The addition we made looks something like this: "scripts": { ...

Exploring the emission of Vue 3 with the Options API through typing

Is there a way to declare emits in Vue 3 Options API similar to the Composition API approach? Based on the Composition API documentation: (docs) <script setup lang="ts"> // type-based const emit = defineEmits<{ (e: 'change', ...