Angular2 - Showing parameters in modal interface

I am working on an Angular5 app and have a component.html file with a function called markerClick that opens a modal. However, I am facing challenges in displaying the item.lat parameter in the modal and would appreciate your assistance.

Below is the code for component.ts followed by the code for component.html.

open(content, latTmp) {
  this.modalService.open(content, latTmp).result.then((result) => {
    this.closeResult = `Closed with: ${result}`;
  }, (reason) => {
    this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
  });
  console.log(latTmp);
}
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>


  <agm-map [latitude]=57.107118 [longitude]=12.2520907 [zoom]="4">

    <ng-container *ngFor="let item of station">
      <agm-marker [latitude]="item.Lat" [longitude]="item.Lng" (markerClick)="open(content, item.Lat)">
      </agm-marker>
    </ng-container>

  </agm-map>
  </div>


<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Station Info</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Test Hardware 1, sätt behörighet…</p>
    <p>Test Hardware 2…</p>
    **HERE I WANT TO DISPLAY ITEM.LAT PARAMETER SENT FROM THE MARKERCLICK FUNCTION!!!!!**

  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>

Answer №1

If you're utilizing MatDialog, follow these steps to pass data to the modal:

   const dialogRef = this.dialog.open(MyModalComponent, {
      data: { Content:this.content, LatTmp:this.latTmp }
   });

To retrieve the data in MyModalComponent.ts, do the following:

  constructor(
    public dialogRef: MatDialogRef<MyModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any  ) { }

  ngOnInit(){
     var receiveContent = this.data.Content;
     var receiveLatTmp = this.data.LatTmp;
     console.log(receiveContent,receiveLatTmp)
  }

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

Even after rigorous type checking, TypeScript continues to throw the ts2571 error when handling an unidentified variable

Consider this scenario: the code snippet below will result in an Object is of type 'unknown'. error: let obj: {[key: string]: unknown} = {hello: ["world", "!"]}; // Could be anything with the same structure let key = "he ...

When moving to a different route inside the router.events function, the browser becomes unresponsive

Within my top navbar component, I have set up a subscription to the router events: this.router.events.subscribe(event => { if (event instanceof RoutesRecognized && this.authService.isLoggedIn()) { // additional custom logic here: ...

The tooltip display in ng2-google-charts is not functioning properly

In my project, I am utilizing the ng2-google-charts library to generate a Timeline chart with a customized tooltip. The requirement is fairly simple - I need to display a specific value based on certain conditions. Below is the relevant code snippet: Comp ...

Error: Attempting to modify a constant value for property 'amount' within object '#<Object>'

After fetching data from an API, I stored an array in a state. Upon trying to update a specific field within an object inside the array using user input, I encountered the error message: 'Uncaught TypeError: Cannot assign to read only property 'a ...

Unable to display information stored in the Firebase database

I am struggling with a frustrating issue. My goal is to showcase the information stored in the Firebase database in a clear and organized manner, but I'm having trouble achieving this because it's being treated as an object. getData(){ firebas ...

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

I have a file called payment-shipping.tsx and eslint is throwing an error Filename is not in camel case. Rename it to 'paymentShipping.tsx' unicorn/filename-case However, the file needs to be in kebab case since it's a next.js page that s ...

Adding to object properties in Typescript

My goal is to dynamically generate an object: newData = { column1: "", column2: "", column3: "", ... columnN: "" } The column names are derived from another array of objects called tableColumns, which acts as a global variable: table ...

When a file is modified in Angular, it triggers an error prompting the need to restart the 'npm' service

Whenever I make changes to a file in my Angular application, I encounter the following error: ERROR in ./src/app/@theme/components/auth/index.js Module build failed: Error: ENOENT: no such file or directory, open 'C:\Dev\Ng\ngx-a ...

Create a tuple type by mapping an object with generics

I have a specified object: config: { someKey: someString } My goal is to generate a tuple type based on that configuration. Here is an example: function createRouter< T extends Record<string, string> >(config: T) { type Router = { // ...

Angular application parametrization

My application consists of an Angular front-end, an app layer, and a DB layer. The architecture can be seen in this image. To serve the JS front-end bits to the client and proxy requests from the client to the app layer, I am using an nginx instance. If I ...

Is there a way to apply a decorator to a function that has been returned?

Can the following be accomplished? bar () { @custom yield () => { } } ...

Updating validation patterns dynamically in Angular during runtime

I currently have a template-driven form with pattern validation that is functioning correctly: <input type="text" [(ngModel)]="model.defaultVal" name="defaultVal" pattern="[a-zA-Z ]*" /> <div *ngIf="defaultVal.touched || !defaultVal.prist ...

Sign out from Azure Active Directory using the ADAL library in an Angular application written in TypeScript

When navigating multiple tabs in a browser, I am encountering an issue with logging out using adal. How can I successfully log out from one tab while still being able to use another tab without any hindrance? Currently, when I log out from one tab, it pr ...

After successfully building with Vite, an error occurs stating "TypeError: can't convert undefined to object." However, during development with Vite, everything functions flawlessly

Currently, I am utilizing Vite in conjunction with React and Typescript for my project. Interestingly, when I execute 'vite dev', the live version of the website works flawlessly without any errors showing up on the console. However, things take ...

Module for migration located in a subdirectory

Currently, I am in the process of transitioning an Angular application to NativeScript while utilizing a code-sharing setup. For the migration of Angular modules, I have been executing the following command: ng g migrate-module --name=nameModule However ...

You cannot invoke this expression while destructuring an array of React hooks in TypeScript

Within my React TypeScript component, I have several fields that check a specific condition. If the condition is not met, the corresponding field error is set to true in order to be reflected in the component's DOM and prevent submission. However, whe ...

Using SystemJS to re-export modules does not function properly

Attempting to re-export modules according to the TypeScript language website - using SystemJS as the module loader: app.ts import * as s from "./AllValidators"; // Some samples to try let strings = ["Hello", "98052", "101"]; // Validators to use let v ...

Choose between using Angular with either PHP and Python or with Django and Python in PHP

For my graduation project, I have developed the frontend using Angular and created a machine learning system with Python. Now, I need to integrate these two components by writing a Web API for Angular using Django, even though I have no prior experience wi ...

Discovering Spring Boot Properties Within Angular Application

Situation: One microservice is built using Spring Boot and Angular 8. In the Spring Boot application, there is a properties file called application.yaml with the following content: url-header: http gateway: host: envHost:envPort ui-endpoints: g ...

Angular Github Deployment Issue: Page malfunctioning as a result of strict-origin-when-cross-origin restriction

I am currently learning Angular and attempting to deploy it on Github Pages. However, I have encountered an issue where the app is not functioning properly. After inspecting the page, I discovered a CORS origin error when trying to access certain resource ...