How to pass Data to a Modal in Angular/ Angular Material…

Good to have you here!!

One of the widely used elements of an application that makes what is called an application or a website is referred to as Modal, so in this today we would get to draw out the way at which we can dynamically pass in data to our Modal using my favorite Javascript framework Angular.

To demonstrate the flow at we would get to pass on data to our modal, follow the steps below, Thank You:

→ Generate just two components (the parent component and the modal component.

— -> Declare your component inside the entry components.

— — -> Fetch your data, Pass your data to the modal component.

— → To generate a new angular app and add angular material to it. After a successful build click on the link in your terminal to open your app on the browser.

— — — — -> Generate a folder name component so as to have a well-structured app, check the image below to see the structure.

— — — — — -> Then we go further to insert component inside entry components that have to be declared inside the NgModule.

An entry component is any component that Angular loads imperatively, (which means you’re not referencing it in the template), by type. You specify an entry component by bootstrapping it in a NgModule or including it in a routing definition.

— — → Let’s declare our entry component if you noticed I import a module called MatDialogModule, the module would be used to create a modal.

— — — → So let’s fetch our data dynamically inside the parent component which is App component in this mini-tutorial app.

— — — → For the sake of simplicity, this tutorial use the basic approach so as to help you get it right at once.

— — — → So to display the array of countries on the HTML file of AppComponent

— — — -> Write a function to view the detail each data in the country array based on the one you clicked.

— — → The modal component pops up, so we then move to capture the data on the component.

As we can see from the picture above, first, we now pass the data to the modal component. You are free to drop a comment!!

As a conclusion, Modal is a very great element that makes up an application. Modals are a big part of web development, and being able to utilize them is very important. I hope you found this post useful. Please support this article with your 👏 👏 👏 to spread it to a wider audience! If you have any questions, leave a comment under the post.

Also, feel free to check some of my previous interesting posts! Best regards 👏Femithz

--

--

--

Experienced Software Engineer with a demonstrated history of working in the computer software industry. Skilled in HTML, CSS, JS, Angular,Ionic , Node js

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Explained — Introduction

NodeJs vs Go- Which is Best for Backend Development?

Create a WhatsApp Clone with Next.js: Sidebar Search Bar

How Competitive Programming Helped Me Land Better Jobs

IMMUTABLE DATA STRUCTURES FOR FUNCTIONAL JAVASCRIPT

Gatsby vs. React Static vs. Next.js: What is the best React-based Static Site Generator?

Ema Hotel

adding a select or drop down list to an Angular 9 App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ajayi Oluwafemi

Ajayi Oluwafemi

Experienced Software Engineer with a demonstrated history of working in the computer software industry. Skilled in HTML, CSS, JS, Angular,Ionic , Node js

More from Medium

Lesson 3 : components Output decorator

Angular forms : a quick simple exaplanation

Exploring Angular Services

Angular, Move rows up or down on the base of the selection