Build Dynamic Forms with Ease

Angular 19: Build a Dynamic Form Builder with Material, Drag & Drop & Code Export! (Part 1)

Estimated read time: 1:20

Learn to use AI like a Pro

Get the latest AI workflows to boost your productivity and business performance, delivered weekly by expert consultants. Enjoy step-by-step guides, weekly Q&A sessions, and full access to our AI workflow archive.

Summary

In this engaging tutorial by Zoaib Khan, you'll learn how to build a dynamic form builder using Angular 19, Angular Material, Tailwind CSS, and Drag & Drop functionality. The video demonstrates setting up an architecture for a future-proof application where you can easily drag and drop fields, customize settings, and export the form. This tutorial is part of a three-part series that dives deep into Angular's features, such as the Angular CDK for drag and drop, dynamic component rendering, and simple state management, offering insights into creating interactive and maintainable web applications.

Highlights

Drag and drop interface makes form building a breeze! 🚀
Export your neatly coded and styled forms to integrate into your applications. 💾
Learn about dynamic component rendering with Angular's ng component outlet. 📺
Use simple state management for maintaining your application's state efficiently. 🗃️
Customize Angular Material components with system design tokens for a unique look. ✨

Key Takeaways

Get ready to build dynamic forms with ease using Angular 19, Tailwind CSS, and Angular Material! 🤖
Learn the ins and outs of using Angular CDK for smooth drag and drop functionality. 🎢
Discover how to create a maintainable architecture that is easy to extend in the future. 🏗️
Customize your components to look just the way you like with design tokens! 🎨
Create interactive interfaces with animations using the View Transitions API. 🎬

Overview

In this informative tutorial, Zoaib Khan takes you on a journey of mastering Angular 19 to build a dynamic form builder. The video introduces you to the powerful combination of Angular Material and Tailwind CSS for styling and arranging components in an aesthetically pleasing manner.

Zoaib highlights the ease of using Angular CDK's drag-and-drop features, allowing you to effortlessly shift form elements and gain full control over your application’s UI. This tutorial covers not just functionality but also touches on enhancing design and usability with custom tokens and animations.

Finally, this tutorial isn’t just about building a form. It lays down principles for an application architecture aimed at maintainability and future-proofing, enabling developers to effortlessly update and extend web applications. Stay tuned for the remaining parts to explore more advanced features and refine your skills further!

Chapters

00:00 - 02:00: Introduction to Angular Material Form Builder The chapter introduces the concept of an Angular Material Form Builder, which is designed to simplify the process of creating complex forms. The speaker acknowledges that building forms is often seen as a tedious task in web development, but suggests that using a form builder with a drag-and-drop interface can make the process more enjoyable and efficient. The builder allows users to easily drag fields, preview them, and adjust their settings.
05:00 - 07:00: Setting Up Project and Tools The chapter focuses on setting up a project and tools needed for the development of a full-fledged application. It introduces a three-part tutorial series aimed at building the application from scratch using Angular 19, Angular Material 19, and Tailwind CSS version 4. The chapter indicates that it will cover various Angular topics, features, and concepts, including drag functionality.
13:00 - 19:00: Designing Form Elements Menu In this chapter titled 'Designing Form Elements Menu,' the focus is on leveraging Angular CDK utilities to implement drag and drop functionality. It explores various layers of drag and drop features, and introduces dynamic component rendering using the ng component outlet. Additionally, the chapter delves into strategies for architecting a front-end to ensure future extensibility, moving beyond simple application development.
24:00 - 32:00: Implementing Drag and Drop The chapter titled 'Implementing Drag and Drop' discusses the architecture used to facilitate a maintainable drag and drop system. It is noted that the architecture is designed to be easily extendable in the future. This is achieved by employing a field type service that governs how types are rendered and code is generated. The chapter also highlights the role of state management in the system, indicating that a simple state management approach is utilized.
39:00 - 46:00: Form Field Architecture and State Management This chapter delves into form field architecture and state management in Angular, particularly focusing on the use of signals and services. It highlights the customization of Angular material components using system and component design tokens. The chapter also shares insights on achieving a unique visual appearance by modifying these components according to personal design preferences.
51:00 - 63:00: Rendering Form Fields Dynamically The chapter "Rendering Form Fields Dynamically" discusses utilizing animations and transitions to create interactive interfaces. It highlights the use of the view transitions API, a native browser CSS transitions API, to achieve smooth layout transitions. The application of this API allows for visual movements of rows and dynamic addition and rearrangement of fields, making the interface interactive and visually appealing.
69:00 - 87:00: Finishing Touches and Conclusion The chapter discusses the finishing touches on the visual interaction aspects of an application, highlighting how dynamic elements can create a more engaging experience for users. It provides an example through the creation of a simple form, specifically a personal information form, demonstrating the capabilities of utilizing basic material form components in application design.

Angular 19: Build a Dynamic Form Builder with Material, Drag & Drop & Code Export! (Part 1) Transcription

00:00 - 00:30 Hey everyone, how are you? Do you like creating Angular material complex forms for your clients or for your projects? Well, I'm guessing that it isn't a really enjoyable part of web development for you. It isn't for me, at least personally. And this can get quite boring and quite tedious to actually set up. But what if you had an Angular Material Forms designer for you where you have a drag and drop interface where you could drag your fields like this and you can preview your fields like this. You could also change settings for your fields like this. and then you could
00:30 - 01:00 export the form, the final form, and integrate it in your application. In this three-part tutorial series, I am going to build this full-fledged application with you guys. I'm going to show you how to build it from scratch. We are going to use Angular 19, Angular Material 19, and also Tailwind CSS version 4, which is the latest. And along the way, we're also going to learn about a ton of Angular stuff, Angular features, Angular concepts. So for example, we're going to learn about drag
01:00 - 01:30 and drop using the angular CDK utilities here. We can drag and drop from here to here as well. So there are multiple layers of drag and drop here. Then we'll also learn about dynamic component rendering. So as you can see here, this actually preview of the text view is dynamic rendering using the ng component outlet. Then we're also going to learn about how to architect our front end for future extensibility. Now it's really easy to create a simple application something similar to this but it's more difficult to actually set it up for
01:30 - 02:00 success so that it becomes maintainable in the future. So we have an architecture something like this. I'm not going to explain this completely here but I'm going to show this in the video when you're ready to actually digest the information. But basically we are using a field type service from which everything else is flowing for all of the types and how to render it how to generate code for it. This makes it really easy for us to extend it in the future. And of course, everything that you see on the main canvas here, this is actually state management. So, we're going to use a very simple state
02:00 - 02:30 management in Angular using signals and using services. And of course, if you have a keen eye for design, you can see that these components actually don't look like Angular material components. And that is because I have customized these according to my own liking. I have used the system design tokens in Angular material and the component design tokens and I'm going to tell you all about how I actually made these changes to achieve this visual look that I wanted. Okay, last but not the least, I have used
02:30 - 03:00 animations here to actually bring my interface to life. So you can see here that when we move the rows here and there, you can see that it visually feels like it is moving and I have achieved that using the view transitions API which is a native browser CSS transitions API. It makes layout transitions really easy. So you can see here that when I keep adding fields here, you can see and when I can move it here, you can see that it's really all really interactive. When I remove the
03:00 - 03:30 rows, it's going to make way for that row. So all of this makes for a really interactive visual feel to your application. Great. So let's see how we can actually create a simple form just as a demo so that you can see what the capabilities of this are. So let's say that we want to create a personal information form for our users. And let's see that we have a personal information section. So I have kept all of the basic material form components that you would typically need for any
03:30 - 04:00 kind of form. And let's say enter your information here. And you can see that the preview has this nice look. And then we're going to add some more rows here. Okay. In fact, more of them. So first we want our three fields for the first name, the last name, and the this because this is one of the most common things. Let's say I don't want to give a placeholder. I just want to make it required. And I want to make it a text. The second one I want to do the middle name. Now this I don't want to make required. I'm going to do this text. And the third one I want to the last name
04:00 - 04:30 here. Okay. And this I want to make it required as well. This is how it is typically in a lot of applications. Okay. Let's preview this. And you can see that we have our three fields here. Let's say we want to add more. So let's say I want to add a drop-down here next. Okay. And this dropdown is going to be a gender. Okay. It's a required thing. And then in the options you can actually remove the options and add any number of options that you would like to. This is also a dynamic form in which we're
04:30 - 05:00 adding fields here. So we can say that male we have female here and then we can also say others for other genders and then we can have a date picker let's say besides this and let's call this the date of birth here. Okay let's also make this a required field. Great. And now let's go into preview and you can see we have our gender here and we have our date of birth and we can enter our information here. Okay. Next, we want to give let's say a radio group. A radio
05:00 - 05:30 group has some more. You can see some options here. So, we have some radio options, which is fine. We're only going to do two radio options here. So, this is basically just information about it's not really personal information, but let's say we're just asking about some account. So, let's say if it's a personal account and you want to say yes or no, but we don't have much space. So, we're going to make it horizontally aligned here like this. Okay, let's preview this. But what if we want to take this above the gender here? So we can actually in fact let's bring the
05:30 - 06:00 gender down here and let's make this up here. Okay, great. So yeah, the personal account should be up here. And then we have the gender here. Great. And then lastly, we want to add a submit here. Okay, let's say that we want to add a button group here. So it has a submit and a cancel button here. Now, we might not choose to use a cancel button, but if we want to, we can use that. We can align it to the left or to the right here. And we can just also do save information just to make it. So we can change that. And when you preview this,
06:00 - 06:30 you have this nice looking form already in a few minutes. And then you can just export this form. And you can then see this form in your code. And you can see that we have our nicely generated form along with all of the Tailwind CSS classes, the layout and the buttons and everything. Okay. Now one special thing for this is also that you can see that it is responsive. So you can see that the fields are wrapping to the next line pretty nicely for small screens. Great.
06:30 - 07:00 So these are all of the features that we are going to build in this three-part series. Okay. So I'm really excited to show you all of this how to make this. But before that just last one quick note that the code for this application is available on my Angular shop. Now I don't do sponsorships or any ads on this channel. So if you want to support my efforts, you're most welcome to find the link in the description where you can actually get the link to get this code. And also if you want to try out this application, it's also deployed on the link in the description. You can try it out yourself as well. Okay, so let's get
07:00 - 07:30 started. So the first thing we need to do is obviously to set up a new Angular material project. We do that by updating first our Angular CLI to version 19 because we want to use the latest version when we starting a new project. Then next we are going to use the ng new command on the CLI and give our name and then I like to use inline template and inline style for my projects so that everything is contained in one component file single file component. Now if you prefer other methods you're most welcome to do so but I'm going to follow this
07:30 - 08:00 pattern in this tutorial. Thirdly we want to install angular material. We can do ng add angular material for that purpose. is going to give you a few steps and we'll just going to use the default theming setup and everything for now until we actually come to that portion of the tutorial. And then lastly, we want to install Tailwind CSS. Now, I'm going to use in fact I want to install Tailwind CSS 4. So, I'm going to use Tailment CSS 4. Now, it's new. So, it has some issues with SAS and everything. So, I have a separate video on this as well if you want to refer to
08:00 - 08:30 it how to set it up with Angular Material. There's a helpful guide on the tilt CSS official website on documentation which gives you the new actually the process to install children CSS 4 with the latest Angular version. So as it happens I have already set it up on this project and you can see we have the latest tailwind CSS here the angular version 19 and we have in our styles dossas we have importing tailwind CSS like this and we have the file here like this. Okay, so everything is set up
08:30 - 09:00 and we just need to start coding. Okay, so let's start with the basic structure of our application here. So you can see here in the final application, we have a header here and then we have your form elements component here. We have the form canvas component here and we have our settings component here. So let's start laying it out on our U. So let's go in our code and let's go in our app.component.ts code here and let's start building our template. So let's build our basic container here. Now we're going to give some styles here. So we're going to make this flex flex
09:00 - 09:30 column to arrange it in a column. And we're going to make the height as a screen. And then we're going to give a very light gray to the background here. Okay. We're going to also give some padding to X4 here. Padding four here. Okay. Let's see whether it's applied. You can see there's a slight gray applied which you can't really see. Okay. And let's create our header here like this. So we're going to do a div here like this. And within this div we are going to give our H1 here which will
09:30 - 10:00 have our title here. So let's say Angular forms designer. Okay. And below that we are going to have a small P here which we're going to call as create beautiful responsive forms with Angular material and Tailwind CSS. Okay, great. Let's see how this looks. Well, it looks really really bad. So let's just style it up a bit. We are going to give it flex and flex column again. And let's give it a bit of a gap between that item
10:00 - 10:30 center. Justify center to actually make this center. A bit of padding between top and bottom. And let's see how this looks now. Okay, slightly better you can see. But we also want to style our H1 here. So we're going to say text to Excel just like a heading would. We're going to make this tracking a bit wide to increase the text spacing. And then we are going to give the font as medium here. Okay, let's see. Okay, this looks good. Then we can have the P here
10:30 - 11:00 styling. The P would we would want to be a bit text gray here. Okay, so it's not exactly white. Okay, so this looks fine. Let's move on to our main section of the app. And so we're going to create another div here which is going to contain our main stuff for the app. And so here we're going to have three components. Okay. So let's create those components one by one. So we're going to keep all of these components. These are sort of our top level components. All of the containing components we're going to keep inside these folders. So we're
11:00 - 11:30 going to do ng component and in our components folder we're going to add the first component which is the form elements menu. Okay, so we have our first component here, form elements menu. Then we have we will have our main canvas component. Then we're going to have our field settings component on the right side. Great. So we have our three top level components here. Let's add them to our div here. So we are going to do app form elements first of all. Okay.
11:30 - 12:00 Then we'll have our app main canvas after that. And then we'll have our app field settings here after that. Okay. Let's arrange this in flexbox. Let's make it flex. We are not specifying flex row. So it's going to assume that. And then we can give these some specific widths that we want to. So we want to give this W64. This one we want to just extend to whatever spaces left. And then this one we also want to give the same
12:00 - 12:30 as W64. Great. Of course we haven't imported these things here. So we have to import these here. Let's see the form elements menu component, the main canvas component, and lastly, we need the settings component, field settings component. Okay, let's save this. And you can see here that we have our form elements menu here, main canvas works here, and field settings works here. So, it's laid around here. Now, let's give it some styling inside of it. So, let's start with the form elements here. The
12:30 - 13:00 styling would be pretty similar. So, we're going to give it the same set of styles here. We want to give a padding inside of it and we want to give the background of white to it. Okay, to make it distinguish from that, we're going to make it rounded LG. And then this is important. We're going to make the height as calculate 100 VH minus 150 pixels. This is going to contain the height of that container to our visible space on the UI. All right. And then
13:00 - 13:30 we're also going to add an overflow y auto so that we can give a scroll bar. And then we also need a bit of a border. And then we also need a border gray 200 and a bit of a shadow. And let's see how this looks. You can see now the form elements menu looks like we have in our form designer here. Great. So let's just copy all of these styles. These are almost the same styles. And we can actually just copy them to the others as well. Okay. Let's remove this. And let's go to our main canvas. And let's do this
13:30 - 14:00 as well. Great. You can see the main canvas looks nice. And then on the other one on the field settings one as well, we want the same thing. Okay. Let's see. Okay. The only problem now here is that we don't we need a gap here. We can add a gap here by just using a gap four maybe here. Just to see how this looks. And you can see that it looks really nicely. Okay. So, we have our three panels ready for our use. Okay. Okay, so now we want to build our first element which is the form elements menu here. So
14:00 - 14:30 how do we build that? Now we can imagine that you would need some form of a list of field types. Okay, so in order to make this easier to actually do it in the future as well, I want to actually keep all of this in a centralized service. So let's create a new service in which we're going to keep this. So we're going to call this service the field types service. All right, let's do ng service. And in the services folder, we're going to call this field types.
14:30 - 15:00 Okay. So we have our field type service here. And it's provided in the root because we want it to be available all of the time to any part of the application that we want. Okay. Now this field type service is sort of the centralized place where we're going to keep all of the information about what field types our application supports. Okay. And this also goes back to the original diagram that I showed you here. I'm going to explain this a bit more and you'll come to appreciate this more later on when I actually show you what is actually contained in the field type
15:00 - 15:30 service. What kind of information is contained in the field type definition. But just for generating the menu, what do we need? We need the field type maybe a type string which is going to tell us that what type of field it is. We need a label maybe just to show the label here. And we need an icon to show that icon. So let's just start with this three pieces of information and let's start with this two fields that our application can support at this time. So let's go back to our field type service here and see what we need to declare here. Okay, so we need a structure here
15:30 - 16:00 which is going to refer to the field type definitions. And for that we need an interface that can contain that field type definition. So let's create an interface as well. Let's create a new folder here. Let's call this models. And let's create a new file here. Let's call this field.ts. ts. So this is going to contain all of the interfaces or structures related to a field in our application. Okay. So let's create our interface and call it field type definition. Every field type definition
16:00 - 16:30 should contain first of all a type which will be a string. Then we can also have the label. As I said this will also be a string. And then we can also have an icon here which is also going to be a string. It's going to refer to the material icon specifier that we have in our mat icon. Okay, so this is a basic structure of our field type definition. So let's go back to the field type service and let's declare some field types here. So what we're going to do here is that we are going to create a field types map here. Okay, we're going
16:30 - 17:00 to do new map here and this is going to be a string. So the key will be the string which will be the type and then the value is going to be the field type definition. Okay, let's import the field type definition from models. Here we're going to initialize this and the form of an array here. So let's say that we give the first one as text here. We want to support the text field first of all because this is one of the most important ones. Outside of this we can actually create this text field definition here like this. So text field
17:00 - 17:30 definition and let's declare this here. So we're going to have for the text field definition, we're going to have the type as text here, the label as text field here, and then we'll have the icon as the text fields here. Okay. Similarly, let's also create a checkbox field here. So we're going to call this as checkbox field definition. And this type is going to be checkbox. Label will be checkbox and icon is going to be
17:30 - 18:00 check_box. All right. So we have two definitions here. and then we can add them to the map here. So we can call this text field definition. Similarly for the other one we can call this checkbox and we can do checkbox definition field definition. Okay. So we have two field definitions here. We need a function so that we can get all of these in our components. So let's create a function and let's say get all field types. Okay. And this is going to be give field type definition array. And
18:00 - 18:30 let's return array from because it's a map. We want to return it from this dot field types this field types do values which gives you an iterator. Okay. So we have our get all field types which you can now use in our form elements menu. So let's go back to our form elements menu now with some of our initial definitions. Let's go back to our form elements menu. And here we can inject our service here. So we can do field types service is equals to inject field
18:30 - 19:00 types service and then the field types are then going to be then field types can then be this dot field type service dot get all field types. Okay, great. Now we want to loop through all of these and create our menu here. So let's say that we do the from new for loop block here and let's say that we do type of field types. We want to track the type dot type. Okay, this the type name. And then within this, we want to have our
19:00 - 19:30 button that we want to. So let's create a new component for this purpose. NGC and components. And this one we are going to keep inside of the form elements menu because we want to keep it contained. It's just related to that form elements. It's a sub component to make it easier for us to organize. So form elements menu and then within this we're going to say the field button. So we have our field button component here and let's use this here like this app field button and then import it here as
19:30 - 20:00 well. So field button component. Okay. Now this is going to take us input our field type specific field type. So let's just put this here and let's say field is equals to type here like this. Now it's not supported here. So let's go in our field button and let's add an input here. So let's say field input. If we're going to use a new signal inputs, obviously it's going to be a required input. It's going to be a field type definition. That's it. Okay. So, we have our input here. There's no error in our
20:00 - 20:30 form elements menu here as well. And now we can build up the layout for the field button here. So, each field button is basically just a button with some special styling for it. Okay. So, let's say that we want to make this width full. We're going to give it some padding. We want to have some border, a grayish border. And when we hover over it, we want to give it a border of black. Okay. And when we hover over it, we also want to give it a shadow MD. Also, we want the there to be a bit of a
20:30 - 21:00 transition for the shadow so that we have a nice animation. We want to make it rounded. And also to lay out within that, we also need flex for this. We need item center for this. And we need a bit of a gap between them. And also we need the cursor pointer. And that's quite a lot. I have the final product here so I can reach it quickly here. But you can actually do it one by one while trying it out as well. Okay. Great. So let's add the div inside of it. So the
21:00 - 21:30 first div is going to be the icon and its container. Okay. So let's have a matt icon within this container. We need to also import this matt icon here. Matt icon module. Okay. So we can't do it like this. Now I'm not using AI at all in this. So you can see that when you do it using AI, you can actually have these things automated quite a lot. For example, importing these things. Okay. So Matt icon is then going to be the field dot field. It's a signal remember
21:30 - 22:00 dot icon here. Okay. And then the container for the matt label. Matt icon is going to be a rounded sort of div. We're going to give it this of a very light gray and let's just make everything I center using this justify center and just a bit of padding. All right, let's see how this looks. So now if we go in our forms designer here, you will see that we have our two buttons here with a slightly better, you know,
22:00 - 22:30 style to it. Let's continue building on it and let's add our text as well. Okay, let's do field dot label and let's see how this looks. And you can see it looks pretty nice. There needs to be some space between this. So what we're going to do is we're going to go back to the form elements menu. And then okay, this should be div. In fact, it should be a div. And also it should have a flex column. Flex flex column. And let's say a gap of four. Let's see how this looks.
22:30 - 23:00 And you can see here now that we have our gap here like this. We can also obviously add another title here. And let's call this H3 here. And let's call this form elements like this. And let's give it the styling of text excel and font medium. So our left side menu layout is almost complete here. Okay. So let's move on to our main canvas here which is sort of the meat of the application and let's build upon this somewhat. Let's go to the canvas here.
23:00 - 23:30 Okay. We already have some basic things here. Let's remove this P. convert this to a div here. Okay. And then within this div, what we're going to do is first add a title. Okay. So let's create a div in which we are going to contain the title and everything. We can give an H3 here just like we give there. Okay. And then in this H3 we're going to say main form canvas. Okay. Let's see how this looks. It looks pretty bad, pretty basic. So in this div we going to just style this a bit. We going to give this
23:30 - 24:00 a bit of a padding. We're going to give this a border bottom a border gray of 200 and then the form canvas itself we want to give it as text excel font medium and that's it. Let's see how this looks. Okay. So form canvas looks better at least better than it was before. So we can actually just remove the P4 here. So we can just do PB4 maybe. Yeah. So this is something similar to what we
24:00 - 24:30 have here. Okay. Here. Great. All right. So then after that what we want to do is we want to create our form editor here at the start and if you go below this we can actually create a new component and let's call this the form editor. So ng C and within the main canvas we are going to create this. So we're going to do components main canvas. So let's call it form editor component. Okay. Then within that we are going to just declare our
24:30 - 25:00 form editor here or just define our form editor here and it's imported it here. That's great. So now let's set up our basic drag and drop functionality so that we can drag different form elements from the left side to our main canvas. Okay. So first let's go to our form elements and let's add dragging functionality here. Okay. So for the drag and drop functionality we're going to use the Angular CDK drag and drop utilities. So there are two concept that you need to be aware of in drag and drop in the CDK drag and drop utilities. The
25:00 - 25:30 first is the concept of a CDK drag and the second is a concept of a CDK drop list. So if you go back to your UI here, so this is basically our CDK drop list that we want and then we want each of these elements to have the CDK drag attached to them. The first thing we need to do then is to go in our app field button here and we need to add and make them dragable. We need to add the CDK drag directive to it. All right. So, let's import that here. Let's say CDK
25:30 - 26:00 drag drop module. In fact, just import all of the module here so that it can have all of the utilities that we need. Otherwise, we'll need to import one of them one by one. So, let's do Angular CDK and drag drop. And then we can just in fact not CDK drag drop, but it's named drag drop module. All right. So, each of our button will be basically dragable. We just need to add the CDK drag directed to this. Okay. And then we also need to specify what is the data that should be attached to that dragable
26:00 - 26:30 instance. So to do that we are going to do cdk drag data here. And this is going to be attached to our field. So we going to send the whole field type definition object along with what we are dragging so that we can initialize a new field on our main canvas. All right. So let's try this out. And once we save this, refresh this, you can see that we can actually drag drop this. But we are actually just able to drag and drop freely. We don't want it to do freely. We want it to be part of a list. So this is the field
26:30 - 27:00 button which is contained within the form elements menu. So we need to make the form elements menu divaining div as a drop list. So let's convert that into a drop list. And in fact, let's create a subdiv here. Let's create a subdiv here because we just want to create these elements as a drop list, not the title here. So, we're going to create a sublist here and shift obviously the flex and flex column to that so that we can arrange it nicely. So, does it look nice at this point? Does it look the
27:00 - 27:30 same? Okay, we need a bit of a margin bottom here. Okay, that's fine. Great. So, this looks nice again. And we can then go back to making it the top list. So, how do we make it a drop list? This div needs to have a drop list. We need to first import the drag drop module again here. And then we need to do a CDK drop list here. Okay, great. So now you can see that we have we cannot really drag and drop here and there. It just remains on place. So next we want to
27:30 - 28:00 disable the drag and drop within it. So this is basically a behavior called the auto sortic of the drop list. We want to disable this. So we're going to disable this using a property that we have cdk drop list sorting disabled and we're going to do this true. So you can now see that we are not going to be able to change the sorting here like this. Okay. The second thing we want to do is that we also want to attach some data to this so that the main canvas can know from where the dragable instance is coming from because we can also drag from
28:00 - 28:30 within our rows. We need to tell the main canvas that it is coming from the form elements menu or not. Okay. So to do that what we're going to do is we're going to attach some data to the CDK drop list and we're going to do CDK drop list data and this data then is going to be just a simple string. We're going to call this as the field selector. Okay. And we're going to check that in when we handling that dropping behavior on the main canvas. All right. Great. So this seems to be fine. Now in the future we're going to make a few more fixes to the drag and drop behavior but for now
28:30 - 29:00 just for testing this flow we're going to let it remain as it is. All right. So this is done and let's go to the main canvas and try to listen to the drop event. So let's go into the form editor and set up our drag and drop functionality here. So first of all we're going to give it a containing div here. All right. We're going to call this a bit of a padding here. Okay. And then let's just create one row so that we have somewhere where we want to receive it. So we're just going to create a dummy row because we don't have
29:00 - 29:30 a structure that represents the rows. We're just going to create a dummy dip for now. So, we're going to call this, we're going to give this B5 and a white background. We're going to make this rounded LG a bit of margin rounded LG border two and a dash border border dashed. And then we also want to give it a gray of 200. All right. So, this is our row that we want to receive the drop event in. Okay. So, you have a nice row
29:30 - 30:00 layer like this. All right. Okay. So, let's then add the drop list here now. So, we're going to import the drag drop module here again. Right. Each row then is going to be the drop list. Okay. So, let's do drop list here. And then also add a handler here. We're going to call this CDK drop list dropped dropped handler. And we're going to make this on drop in. And since we don't have any row ID here at this point, we're just going to send in the event which is going to be that. Okay. Let's just add a handler
30:00 - 30:30 here for that on drop in row and the event here is basically the CDK drag drop string here. CDK drag drop string here. So now let's try this out and see whether this works and you can see here that the drag and dropping doesn't work. Okay. Now that is because we need to connect the droplets as well. Okay. So there's a property called connected to. we can connect it explicitly but we can also use an easier way and that is to contain both of these into a CDK drop
30:30 - 31:00 list group directive. Okay. And when we do that it's going to connect all drop lists within that container. All right. So let's go to the containing container which is the app do component which is a top level component. It has a form elements and it has a main canvas both. So we need to add a dropless group here. So let's import the drag drop module here as well. And let's add a CDK drop list group here. Okay. And let's save this. And let's see what changes it brings. And now you can see that we can
31:00 - 31:30 drag and drop between them. Okay. Now, one thing we don't want is that we don't want the placeholder to show here, you know, because here it should show the field actually. So, we're just going to disable the placeholder. So, let's say that we go in our app form elements menu and for the field button, it's really easy to do. So you have cdk drag data here. Right now within that we can also give a div and just an empty div because we don't want to show anything. And we can then just specify that this is cdk
31:30 - 32:00 drag placeholder like this. Okay. And now we don't have this placeholder showing here. But then how do we show when it's dragging on the main canvas? How do we highlight that? Well to highlight that we can add some styling to that. Okay. And let's go in our styles because this is sort of a global style. We want to add this here. So let's add this style here. So this is a special style for CDK drop list groups and drop list. So we need to use the CDK drop list dragging style here. Okay. So
32:00 - 32:30 this class is added to any container in which you are dropping something. Okay. So this is a nice indicator for that. But remember our form elements menu is also a drop list. We don't want to apply it on this. Okay. We only want to apply it on this form canvas. So we are actually going to add a not selector to it as well. And let's say that we can call it the elements menu. Okay. And then we're going to give some styles to it. So we're going to give a border to pixel. And let's make it solid. And we
32:30 - 33:00 also need to make it important so that it overrides the existing style. Similarly, for the background color, I want to give a light gray background for now. In the future, we're going to change this to material design tokens so that it's more easier. And so here we also we're going to give a light gray here. And then this elements menu, we want to add it to our form elements menu here. So that this does not get applied to this. We need to add the elements menu to our existing class. Okay. So let's save this. And now when you drag
33:00 - 33:30 it, you can see that we have our gray sort of this. We are going to improve it further to actually highlight a bit better version of this, but it's going to do good for now. Okay. So now we are able to drag and drop just as we wanted it here. You can see here that is pretty close to this. Now let's see what do we actually drop on the canvas here on the editor here. Right. So let's go to our form editor again and let's see what happens in our drop in row here. So let's console.log the whole event here.
33:30 - 34:00 Okay. Okay. Okay. So if we check it here and if we go in our console here and we drag drop the text field here, we can see that we have our container here. All right. And we have a previous container here as well. Okay. So the previous container you can see that we have the data as a field selector. So this is actually what we want to check so that we can find out where it's coming from. So this will be the first case that we are going to handle on the dropping case. The other cases are when it is dragging and dropping within the rows. So what we're going to do here is that
34:00 - 34:30 we're going to first do a check and for that we're going to do event dot previous container dot data if it is equals to field selector. This will be our first case and we're going to return things after that. Okay, because after that we're going to be handling the next cases. So here we want to then add our field to the row. To add a field to the row though we need to do some ground work into setting up our form field interface and our form service for state
34:30 - 35:00 management. Okay. So till now we have only just one interface and that is called the field type definition and this we use to actually generate our form elements menu and we're also going to use it in the future for other things like rendering the form rendering the preview for the field. Once a field is dragged from here and put it on the canvas and put on the canvas here, what do we actually want the field to be here? So we want it to have its own representation. And how do we represent that? We're going to represent that
35:00 - 35:30 using a form field interface. All right. So let's declare that form field interface here. Now, now this is also related to the field. So we're going to put it in the field folder, a field file here. So let's say that we're going to do the form field. Now remember the distinction between the field type definition and the form field that is just a definition and the form field is basically the actual field on your canvas. Okay, so it's an instance of that field type. Okay, so a form field is going to have your ID which will be a unique ID. Then we'll have the type
35:30 - 36:00 which will be the same type as the type of the field type definition. Then we will have a label and then let's also add a required and let's call this boolean. Okay, let's start with these four properties that each form field when you drag it on the canvas here need to have and then also the second thing you'll see that our canvas is basically going to arrange into if you look at the final result into rows here so we also want to represent this okay so how do we represent this so let's represent this
36:00 - 36:30 by using another model file and let's create a formts here okay we will have an interface called the form row. Okay. And then our form is going to be just an array of the form rows. All right. It will also have a unique ID to identify it. And then it would have the fields for that form in an array. And this will be the array of form fields. Great. So we have these two structures. Now we want to manage all of the state of the
36:30 - 37:00 form field and the rows in our own custom simple state management. So let's create a service for that purpose. Let's do ng service and in our services folder we're going to do form service here. Okay. So our form service is also provided in the root because we want it to be available everywhere. Okay. So what will our form service contain? Okay. Our form service is first going to contain our rows here like this. Okay. And let's make this private because we're going to expose them only as read
37:00 - 37:30 only. Later on I'm going to represent them as signals. And it's going to be an array of form rows here. Initially we're going to have this as empty. All right. And then we also want to read these rows. So how are we going to do that? Well, we're going to do public read only and we're going to do rows this dot as read only. This is going to give us a version of that signal. All right. So that it cannot be changed from the outside. Okay. And in the constructor we're going to give an initial value to
37:30 - 38:00 this. So the initial value is going to be this dot rows set the id is going to be a crypto id. So crypto dot rand random uu id and then in the fields we're going to show is as empty so that we have something initial to work with. All right. So now let's add the first function that is going to be an add field function. Okay. So this function is going to have our field first of all which is going to be our form field.
38:00 - 38:30 Then it's going to have our row ID which is going to tell us in which row we need to insert this. And then it will also have an index which is an optional property to tell us where in the row we want to insert that. Okay, great. So what do we do here? So first of all we're going to get our rows and we're going to go our signal here the value of the signal and then we're going to use the map function to actually create an immutable copy of this. So we're going to do new rows and rows do map for each row. then we are going to handle
38:30 - 39:00 whatever we want to. So for the most part we actually don't want to do anything to the rows. We only want to modify the row that we are adding the field in. So let's check for that. So if row do ID is equals to row ID. We're going to create the updated fields for that row and an immutable copy. Now remember while working with signals even if you're using the update function or the set function or whatever this the value of the signal that you're setting it has to be an immutable copy of that.
39:00 - 39:30 Okay. So it should not be the same copy otherwise the changes might not be propagated because signals actually have memorization built in. So, so unless it's going to recognize it as um different JavaScript reference object, it's not going to propagate that change to the UI and that can lead to subtle bugs which are difficult to note. So, always remember that for signals using in state management especially in services like this you have to create an immutable copy and then set it to the
39:30 - 40:00 new signal. So, here we're going to do an immutable copy of the row fields. Okay. And if index is not equals to undefined that means that there is an index we need to specify we are going to do updated fields splice and we're going to insert it only at that specific location. We're not going to take out anything and we're going to insert that field. Else what we're going to do is we are going to just push it at the end. Field push and we're just going to push this field at the end. Okay. and then
40:00 - 40:30 return for the return we are going to give the row itself but the fields are going to be the updated field and if this if condition is not true then we're just going to return the row which is for all of the rows that are not changed all right so we have the new rows at the end here and then we just need to do this dot rows dot set to the new rows okay so our add field function seems to be good now we just need to handle that in our form editor here but before that
40:30 - 41:00 we also need to show our row for each of the rows in our form service. So we need to do if we need to do a for loop and we are going to also inject the form service here. So let's do form service is equals to inject the form service and let's do rows of form service dot rows. This is a read only signal that we were using. And for each row, since we have an ID, we can easily do in fact we
41:00 - 41:30 should do row of rows. And we're going to track row ID here. All right. And within this, we are going to show our this. So each row is going to be a drop list by itself in which we can drag and drop our elements here. Okay. Now if we go back and if you see this you can you're not going to see any change here because it's actually just showing our initial row that we added on the form service that we have our initial row. Let's first handle the on drop in row now and add our field to the row here
41:30 - 42:00 like this. So here what we're going to do is we we're going to call our thisform service dot add field. Now here we need the field here first. So we need to form the field object. So let's form the field object first here. And let's say we call this new field which will be field. So here first we need the ID. The ID is going to be the same crypto random UU ID. I know they're a bit long but the ensure uniqueness. So it makes it a bit easier for us to handle internally. All
42:00 - 42:30 right. Then the second thing we need is the type. Now the type we need to get from the definition that we have. So let's get it from here. So let's get the field type from here. And let's say the item itself remember the form elements the button the field button the field button has an it is the item that is being dragged. So it has the field type definition attached to it. All right. So that is the data that we want. So let's go to the form editor again and let's get this item dot data. So this is going
42:30 - 43:00 to be a field type definition. Okay. So here then we can just do field type dot type here. And then we also need some default configuration for your initial fields. Now this is related to our field type definitions. So let's go to our field.ts and let's add some default config here as well. So we can call this as default config because this is going to be there for each field. And this default config can be any. And then in our field type service we can actually
43:00 - 43:30 add these default config as well here. So we can add a few default configs here. So let's say that we give the label as text field and let's say we give the required property as false. Okay. So these are some basic default config that we can give for our text field here. Similarly for the checkbox we are going to do the same thing. Let's just copy the same thing and let's just call this as the checkbox field. Okay.
43:30 - 44:00 Then let's go get back to the form editor. And here then we can just spread out our field type dot default config here. Okay. Now we have the new field. So we can add the new field here. And where do we want to add this? Do we want to add this to the row? So now we have the row here. So what we can do is that we can also pass in the row dot id here. Okay. And here we can give the row ID as the string. We can pass in the row ID here. And then lastly we need the index.
44:00 - 44:30 So for the index, we actually just want the event and the current index property based on where the user is actually dropping our field in a drop list. Okay, great. So this is going to be form field and then let's save this. Okay, so now nothing happens because we are actually not showing anything here. It is being added internally but we're not showing it. So let's just show something here. So we are also going to do a for loop here and this is going to be our field
44:30 - 45:00 of row dot fields and we're going to drag the same thing field do ID okay and here then we can just for the time being we just want to show the label of our field okay so we're going to do field dot label okay so let's test this out and see how this looks okay so you can see that we already had a text field let's clear this out and when we drag and drop now you're going to See our text field has been added. Another you can see another text field has been added. And let's a checkbox checkbox
45:00 - 45:30 here like this. Great. So you can see our fields are being added on the form row here. And we just have one row here. Okay. So we have our fields being added to our row here that we have. Now let's add some layout styling to it here so that we can arrange it in a way our field should be arranged. Add some styling here. And let's just call this row just for now. We're just going to call this row like this. And then below that we're going to contain all of our fields in another div. So this is going to be something like this. And then this
45:30 - 46:00 div is then going to be flex. And let's let's say give it a gap of four. And then let's also make it flex wrap here like this. This is going to wrap it on the next line if it does not fit into that specific thing. And and for each of the div we going to make it flex one. This is going to grow the field to that flex container equally divided in the widths. Okay. So let's save this and let's see how this looks. And now you can see that we have a row here and then we have our fields here. And once you
46:00 - 46:30 start adding the fields you can see that it's adding it horizontally not vertically. And then it's also going to wrap it when it sort of reaches that level. You're going to see it's also going to start wrapping the fields below here. Okay. So yeah this is the layout that we want. Now we've also added the CDK dropless orientation as mixed here and this means that our fields are going to be arranged in a horizontal way but they're also wrapping. So that means that they're also vertically arranged. So it's a sort of a mixed arrangement and this is going to help us when we
46:30 - 47:00 actually you know drag and drop in the correct place using the CDK drag and drop utilities. All right. So next let's move on to the next stage and that is we want to show our fields here as a preview about how that field will look like. So how do we go about doing that? A simple way to do that would be to actually remove this div here and within that what we can do is we can just use a switch statement here and the s statement we are going to listen on the field type and then we can use case
47:00 - 47:30 statements and for each case of the type we can give our template code for that specific field. Now this is a very simple way to do this easily understandable. But the downside to this is that as the field types are going to grow our component here the form editor component is going to become really really large and bulky and for each of the field whenever we have to remove or add fields we have to come back to the form editor which actually has nothing to do with the type of the field. All right. So in order to come up with a better architecture I used some
47:30 - 48:00 assistance from AI and some of my own intuition over the years with experience to come up with this structure which I showed you initially as well. So here now we can explain this fully. So this is the extensible architecture that I'm following in this because this project naturally fit to this structure. So the structure is that there is a central location a sort of a brain of the application where we are storing all of our field types and this is the field type definition interface that we had defined initially previously. Okay. What
48:00 - 48:30 happens in this architecture is that we have the field types service containing all of the field type definitions and then everything else flows from this field types. So for example, we are already using the form elements menu from the field types and then we are also going to shortly use the same field types to actually get the component that should render here and we're going to use dynamic rendering to do this. All right, then we can also use the same field types definition to define our
48:30 - 49:00 settings for that specific field type and we can then use it to generate our settings component here. Last but not the least, we can also use the field type definition to store our functions for generating the code for this specific field type. So everything related to a field type, a metadata you can sort of say is contained in the definition for this field type and that is all contained in the field type service. So what's the benefit of using this architecture versus the switch case architecture that I showed you here? Well, for the switch case architecture,
49:00 - 49:30 you would have to go inside of this file, the form editor file for each new field that you need to add and you'll need to go into multiple files to change this such a thing because there will be a switch case statement in the field settings. There will be a switch case statement maybe in the form elements. So, everywhere there is a field type, we'll need to add that. But the benefit of using this extensible architecture, first of all, there's also a con obviously because we need to have a bit more files. It's a bit more complicated to set up initially. But the benefit big benefit is that it makes it extensible for the future. So it's going to be
49:30 - 50:00 really easy to add new form fields and also to remove field types in the future. So all that we have to do if you want to add a field type in the future is that we need to just add a field type a field type definition containing all of the information related to that field and then just add it to our field type service and it's going to work out of the box on all our layouts. We don't have to go inside of the canvas, the form elements and settings to actually change the field types, add or remove field types. Okay, so this is one way to
50:00 - 50:30 create an extensible architecture in your angular applications. And let's see how this works exactly. So we are going to use this to programmatically render our component here according to the field type. Well, let's remove this switch case statement. Let's create a component that actually renders this field preview. So, ng generate C and we're going to go in components. In components, we're going to go in matt canvas because in the main canvas we have our form fields rendered. So, we are going to create a form field here
50:30 - 51:00 like this. Okay. And in this form field, in fact, let's first import this here. So, let's do app form field here. And let's also import this here. So, we're going to do form field component. Okay. And we are going to give the input as the field here. So let's give this field as a input here which is of the form field interface class. Okay let's go in the app form field and now build upon upon this. So our field is going to be our input dot required and our input is going to be the signal input and this is
51:00 - 51:30 going to be our form field and then here we can actually just use a div or a container. First let's give it some styling. So we are going to say that okay we have bg white. Okay. And we're going to have a padding of four. Then we're going to do rounded. And there will be a shadow obviously inconsistency with our all of the other styles. Then I want a border a border gray 200. And when we hover over it, we want a border
51:30 - 52:00 black. And then we have a cursor pointer because we are going to enable selection of this form field so that we can change the settings as well in the future. All right. Great. So then within that then we'll have our ng container element here and this ng container is then going to contain our ng component outlet which is the easiest way to use to programmatically render components in angular. But where do we get this component from for each of the field type? Well, we need to keep this in the field type definition and for that we need to also create those components.
52:00 - 52:30 Okay, so let's create this component first. Let's go in our components folder here and let's create a specific folder for this purpose. So let's say field types and in this we'll have all of our field categorized by folder. So let's create then in our ngc components and in our field types folder let's create the preview for preview fields the preview components for two of the field types that we have. So let's do components field types and let's create a text
52:30 - 53:00 field component. Similarly next field let's make a checkbox field component. So we have these two fields here. Okay, let's build up the text field here first. And I'm just going to show you how to actually build it up. So we're going to import this. First of all, the mattform field module here and the matt input module here. Okay. Okay. Mattform field we can import easily. But for the input, we imported something like this.
53:00 - 53:30 And then here we are going to give simply the mattform field like this. Okay. Now we're going to give some default settings for the mat form field later. Here what we're going to do is just give it a class of width full so that it extends to the whole width. And then within that we are going to give the matt label and this matt label is going to be what we don't have any input here. So we're going to specify the field here as an input dot required and this is also going to be a form field here type and here then we're going to
53:30 - 54:00 do field dot label. Okay. Then obviously we have the actual input. We'll use the matt input directive here. And then we're going to give our fields one by one. So the first is our type for the field. So we want to add this configuration option for our text field. Now how do we add this? We are going to go in our models and our field and for our form field. We're also going to add this input type. But this will be optional. All right. Because it only
54:00 - 54:30 corresponds to the text field form element. Then we're going to go to the text field here and we are going to say that okay field dot input type and if it's not there because it can be null we are going to just give the text field type here. Okay. And then we have the required property which is going to give the asterisk besides the field and we can just use the required property of this to set this. All right. So nice and simple, just one field, but you can imagine that if we have more complex
54:30 - 55:00 field types in the future, it's all going to contain very neatly and cleanly in one file for us to use later. Okay, so this is the app text field. Now, we can also do the same for the checkbox field, but we're going to make this really quick. We are just going to copy this here. I'm just going to import this here. And I'm going to remove the common module because we don't need it. This standalone. And the rest of the stuff, you can see that it's really simple. We just have the required field and the label that we have here set in. Okay. So this is the preview component for the
55:00 - 55:30 checkbox field. Now one last thing we need to do is to just add these to the field type service. So first we are going to go in the field type definition and in the field type definition now we can also have a component here. Now since it's a component we can give type unknown to it or we can also give an any type to it. We just want to store the component definition here. All right. So then we're going to go back to our field types again field type service and here then we are getting an error that we need to set this. So we're going to in
55:30 - 56:00 the component part we are going to give the text field component and in the checkbox part components part we are going to give the checkbox field component. And while we are in the field type service we also want to make a small change here. And we also want to have another function here which is just going to give a specific field type that we want. This is we're going to use to get the component to actually render in the UI. Okay, for that specific field type. So we're going to take in the type
56:00 - 56:30 here as a string. And we're going to return here the field type definition or undefined here. And we're just going to return this dot field types dot get the type here like this. Let's go back to our form field here. Okay, now back in our form field, what we want to do is we want to render this specific fields component here as a preview. Here we get the field the form field instance the specific form field instance. We want to use the field or type here and we want
56:30 - 57:00 to get that specific field type definition for this specific field type. So since it's a signal, it's really easy. We just need to create a computer for that purpose. And before that, we just need to inject our field type service. And then we're going to create a field type here. This is will be a computed first. We're going to get the type here equals to this dot field type service. Get field type. And we're going to get this dot field. This do field. It's a signal type. Great. So this can
57:00 - 57:30 be either undefined or typed. So we're going to return type dot component. And if there's nothing here, we're just going to give null. Right? So this is the field type. And here then we can use the ng component outlet ng component outlet directive here and ng component outlet and inside of this we can give our feed type in fact let's rename this to preview component okay and let's make this preview component preview component of course this preview component also
57:30 - 58:00 has an input that we need to send because for every field type we have this field form field input that we need to send so that we already have here so we just going to send it using the ng component outlet inputs here and in this inputs we are going to specify the field as a field here right let's save this and let us see how this looks right let's go back to our forms designer here let's drag it here and now you can see we have our preview text field component let's drag the checkbox here you can see
58:00 - 58:30 we have the checkbox here as well okay so nice and easy we just need to extend this to the width here so let's go to our form editor here and in the form editor. We want to add a flex one to this so that it extends to the whole width. Okay, you can see that it extends to the whole width. And then you can see that it is of the appearance type field. We want to give a default appearance because I personally like it. So I want to make some changes to my app doconfig to provide the matt pro default map
58:30 - 59:00 mattform field options. And let's say that I want to provide the matt form field default options. And I'm going to use the value of first of all I want to make the appearance as outline. Okay, I like the outline style. And then secondly I want to for the subscript sizing option which is actually the space here at the bottom. As you can see some empty space here at the bottom. So this is the space that is by default given to it for the error message or the
59:00 - 59:30 hint message. But we don't want it all of the time. We only want it when it is needed. All right. So we don't want it at this point. So we're going to do this dynamic. So when there is an error or when there is a hint, it's going to make that space. Otherwise, it won't have that. Let's do it again. And now you can see that we have our text fields in that specific format that we had already. Okay, great. So now let's continue on this. And one last thing we're going to do is to actually style this form field component here and add a delete
59:30 - 60:00 functionality to the field so that we can have a whole flow working where we add a field and we remove a field. All right. So, let's go to our form field component here. And above this ng container, we also want to have a header where we're going to have the delete and all of the other things. So, here we're going to have a span here which is only going to say the type of the field. So, it's going to be field type, but it's going to be in the title case. And in order to use that, we will need to use a
60:00 - 60:30 title case pipe here from Angular common. And then after that we also want to use the button matt icon button matt button module. Let me import this. No, we can't. So these are the things that AI really helps me out with on a daily basis. And this sort of makes it quicker for things to do. And we can also give the matt icon module. Yeah, it's automatically detected that. Okay. So button matt icon button. And for the matt icon then we would like to use the
60:30 - 61:00 delete icon. Okay, we're going to style this as a smaller text here. Text SM. And for the button, we're going to style the icon as a bit margin from the right side. Negative margin from the right side so that we can align it properly. And then we have flex here item center and justify between so that the button is on the right side. And then give a sort of margin at the bottom here. And then here then we can give a small
61:00 - 61:30 padding at the top. We don't want such a big padding. All right, let's save this and let's see how this looks. You can see that we have a nice header along with our field here. Let's add the handling for the delete button here. So, let's first go to our button here and let's add an onclick event handler. Let's do delete field here. And we're going to send the event here as well because you want to stop the propagation for the event. So, let's say delete field. And here we can do E as the event. And then we can do e dots stop
61:30 - 62:00 propagation. And then after that we need to add that delete field function. So in the form service we need to add the delete field function now. So let's add the delete field function here. We just need the field ID as a string. And as before we're going to get the rows signal here. And we're going to create an immutable new rows by mapping on the existing rows. And here we're just going to return the the row itself. But for the fields, we are going to do row dot
62:00 - 62:30 fields, the existing fields and filter. And we're going to filter it on the ID. So this is a good way to delete something from an array because it returns an immutable in this case. And for signals, remember that we need to use immutable data. So f dot id not equals to field ID. And then after that, we're just going to do this dot rows dot set and we're going to do new rows. All right. And then we're going to go in form field again and inject form
62:30 - 63:00 service. And then in the delete field, we're going to do this dot form service dot delete field. This dot field dot id. All right. So let's test this out. Let's save this and let's test out the whole flow. So we can add a text field by dragging and dropping it here. We can add a checkbox by dragging and dropping it here. And when we click on delete here, it's going to remove that. We can add more. can delete those again and you can see our basic flow is
63:00 - 63:30 working. So the end result for this part one is that we have a reasonable looking angular forms designer with our basic flow working that means we are dragging and dropping our fields and it's rendering on the UI dynamically using a very extensible architecture which makes it easier for us to add more form fields in the future. Now in the next part we are going to add the preview functionality here. As you can see here this preview functionality and of course our settings panel here for each of this and deriving it all from the field type service making it dynamic. Then we're
63:30 - 64:00 going to add adding of row here. This functionality deleting of rows. So just as a reminder again that the code for all of this the final code for all of this is available on my angular shop. If you want to get a look at the code or just want access to the code to use in your own applications, you can get it from the link in the description. Also, you'll find the link to the actual deployed version of this Angular Forms Designer so that you can try it out yourself as well. So, I'll see you in the next part where we're going to add more exciting features to convert it
64:00 - 64:30 into the final result that we have here. So, thanks for watching and I'll see you next