Struggling to transmit data to material dialog in Angular2+

I am facing an issue with my Material Dialog not working properly. Can anyone point out what I might be missing?

product-thumbnail.ts I will use this to trigger the dialog

export class ProductThumbnailComponent implements OnInit {

  @Input() product: Product;

  constructor(public dialog: MatDialog) { }

  ngOnInit() {
  }

  openPopup(prod) {
    this.dialog.open(ProductPageComponent, {
      autoFocus: true,
      width: '400px',
      data: {product: prod}
    });

  }

}

product-page.ts This is the component for the dialog box

export class ProductPageComponent implements OnInit {

  @Input() product: Product;

  constructor(
    private cartService: CartService,
    public dialogRef: MatDialogRef<ProductPageComponent>,
    @Inject(MAT_DIALOG_DATA) private data
  ) { }

  ngOnInit() {
  }

  onAddToCart() {
    this.cartService.addToCart(this.product);
  }

}

Click here for Stackblitz demo

https://i.stack.imgur.com/8WqoX.jpg

Answer №1

The stackblitz example you provided is missing the necessary animations dependency.

I took your submission, added the required dependency for animations, and included the ProductPage Component in the Entry Components of your app module.

Check out the updated version here

@NgModule({
  declarations: [ProductPageComponent
..
  ],
  entryComponents: [ProductPageComponent],
  imports: [
..
  ],
  providers: [...],
  bootstrap: [AppComponent]
})

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

Troubleshooting an Ajax request in Google Scripts with a '$' variable bug

I am trying to implement an AJAX Request using the ajax() method. I have created the functions below on scripts.google.com, but encountered the following error: function AjaxCall() { var arr = { City: 'Moscow', Age: 25 }; $.ajax({ u ...

I'm confused about how to make sure each child in a list has a distinct 'key' prop, it's important for proper rendering

Hey there! So I've got this assignment from school that involves fetching data from randomuser.me. I followed all the steps given to me, but ran into an issue when a warning popped up in the terminal. The project compiled successfully and is running f ...

What is the best way to retrieve the name of a Meteor package from within the

As I work on developing a package, I am looking for ways to dynamically utilize the package's name within the code. This is particularly important for logging purposes in my /log.js file. My main query is regarding how I can access the variable that ...

The Angular UI tree is malfunctioning on Mozilla Firefox

Check out this Plunker example. While this Plunker works well in Chrome and IE, it encounters issues in Mozilla Firefox. There seems to be a problem with the dropdown selection causing the page to reload. Any ideas on how to fix this? <script type= ...

Using React to retrieve information from an array stored in the state

Hello there, I'm currently learning React and I'm facing an issue with my code. Within my state, I have an array and a function called submitted. This function is used to push new data into the array. Everything seems to be working fine except f ...

Utilize JavaScript to append elements to an array in each loop iteration, gradually building a single, unified

I find myself in a situation where an async request is sending data to a child react component. Upon logging the "data" in the component, I receive multiple arrays sequentially. Ideally, I would prefer not to rewrite the request in the parent component and ...

Using NodeJS to facilitate communication between multiple NodeJS instances while also overseeing operations of a Minecraft server

I have a question about communicating between NodeJS instances. Let's say I have one NodeJS instance running a chat room - how can I access that chat and see who is connected from another NodeJS instance? Additionally, I'm curious if it's f ...

merging JavaScript objects with complex conditions

I am attempting to combine data from two http requests into a single object based on specific conditions. Take a look at the following objects: vehicles: [ { vId: 1, color: 'green', passengers: [ { name: 'Joe', ag ...

What is the best way to obtain a unique dynamic id?

This is the unique identifier retrieved from the database. <input type="hidden" name="getID" value="<?php echo $row['ID']; ?>"> <input type="submit" name="getbtn" value="Get ID"> How can I fetch and display the specific dynami ...

Unable to compile Angular 5 using the AOT systemjs configuration

I've hit a roadblock in finding a solution to my issue. Maybe someone out there can lend me a hand. I'm in the process of upgrading from ng 4.4.4 to 5.0.1 and everything seems to be functioning fine in JIT mode. However, when attempting to compi ...

Encountering the error 'Cannot read property 'length' of undefined' while attempting to fetch data from a URL using node.js

While attempting to create a Discord-Bot capable of looking up definitions on urbandictionary, I encountered an error after trying to fetch the json from their api. const args = Array.prototype.slice.call(commandArgs); if (!args.length) { return m ...

Angular 2 lacks compatibility with SVG

I have a website where I want to include SVG images inline with my HTML using Angular 2. However, when I try to load the SVG icons within a component, they do not display correctly. Instead, I see the following: https://i.sstatic.net/Ozo6E.png You can vi ...

Incorporate a Google map into a table row by extending it across all table data cells

Apologies for the vague title, I am having trouble articulating my issue. Nevertheless, I am dealing with a complex HTML table structure as displayed below: <div *ngFor="let item of result; let i = index"> <table ...

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

What is the best way to show distinct items and their frequencies from an array of objects in Vue.js/JavaScript?

I have been developing an inventory management application using Vuejs, and I am facing a JavaScript-related challenge in my project. The issue revolves around handling data that includes user information retrieved from a form, as well as static categories ...

Material UI TreeView: Organize and present node data with multiple columns in a tree structure

const treeItems = [ { id: 1, name: 'English', country: 'US', children: [ { id: 4, name: 'Spring', country: 'Uk', ...

Data manipulation with Next.js

_APP.JS function MyApp({ Component, pageProps }) { let primary = 'darkMode_Primary'; let secondary = 'darkMode_Secondary' return ( <Layout primary_super={primary} secondary_super={secondary}> <Component {...page ...

Error occurs when incorporating OrbitalControl into Three.js leads to TypeError

Attempting to incorporate OrbitalControls into a Three.js Script to allow users to view two spheres in an empty space. However, upon running the code, the following error is encountered: three.js:5353 Uncaught TypeError: Cannot read property 'center& ...

Benefits of utilizing an RxJS subject for Angular forms

In Angular, I have a simple template set up as follows. component.html <div class="form-group"> <label class="form-label">Liquid</label> <ng-select [items]="liquids$ | async" placeholder="Select ...

Struggling to retrieve the most recent emitted value from another component in Angular?

Hello everyone, I am currently attempting to retrieve the most recent updated value of a variable from the component app-confirm-bottom-sheet in the app-bene-verification.ts component, but unfortunately, I am unable to achieve this. Below is the code snipp ...