From the course: Mastering Nest.js: Build Scalable Applications with Mastery in Nest.js Framework

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Interface & functionality: Edit product

Interface & functionality: Edit product - Nest.js Tutorial

From the course: Mastering Nest.js: Build Scalable Applications with Mastery in Nest.js Framework

Start my 1-month free trial Buy for my team

Interface & functionality: Edit product

“

So, let's design the interface for the edit product page. We want to keep the interface similar to the add product interface. So let me open the add product template file and I will just copy this container division. I'll remove the heading and paste it here. Let me change the heading to edit product. I'll also change the action path to edit product route. Then I'll update the button text. Let me remove the icon and text. I'll give save changes. That's it for the structural part. Let's save and check the output. I'll click on the edit product button and the page is redirected. This is how the edit product interface looks. Now what we want is, whichever product is clicked, its data should be filled in the respected fields. And to do so, we will take the product data by its ID, and that product ID will be sent with the URL. How are we going to do that? Let's see. I'll open the home EJS file. I'll scroll down to where we have defined the edit button. Here when the edit button is clicked,…

Contents