This content originally appeared on Bits and Pieces - Medium and was authored by ugur salin
Reusable components are essential in software development for a couple of reasons:
- Efficiency: Reusing components saves time and effort in the development process since developers don’t have to start from scratch every time they need to implement similar functionality.
- Consistency: Reusable components help ensure consistency in the software system.
- Flexibility: Reusable components are designed to be flexible and can adapt to different contexts, which means that they can be used in a variety of situations.
There are several ways to create reusable components in Angular:
- Passing inputs to component (passing necessary information to configure and render the component)
- Content Projection (ng-content)
- Transclusion (ng-template-outlet)
💡 Tip: Once you’ve created your reusable Angular components, you can use an open-source toolchain such as Bit to “harvest” them from any codebase and share them on bit.dev. This would let your team reuse and collaborate on components to write scalable code, speed up development, and maintain a consistent UI. You can learn more about this here.
Find out more:
Introducing Angular Component Development Environment
Which option you choose will depend on the requirements of the component.
If you are building a simple component, simply passing inputs to the component will suffice. But if you find out you need to supply a lot of inputs to support different use cases you might want to try something else.
I will use Transclusion in this case since it allows a very high degree of customization.
So what is Ng-Template-Outlet?
ngTemplateOutlet is a directive in Angular that allows us to dynamically render a template in the component. This is useful if you want to reuse a template in multiple places and want the template to be customisable.
Note that, Ng-template is lazy loaded in Angular so without referencing it directly or ngTemplateOutlet it will not be rendered.
The basic syntax of ngTemplateOutlet looks like this:
ngTemplateOutlet tells which template to render and context tells the component what to use as data.
In this example, we define a template variable name using the let- syntax to declare it. We then use ngTemplateOutlet to render firstTemplate template with a context object that provides the value ‘K’.
So this code would result in <p>Hello, K!</p>.
Notice that if you use the syntax with $implicit, you don’t need to bind a variable to template variable, it is automatically inferred.
Creating the List View
We start by creating the Todo-List component. We pass data and template Ref as an input to UI container component.
The UI container component is quite simple for now.
It just displays the List component to make sure it works for now but this will be the smart component deciding which component will be rendered on user choice.
The List component is a generic component, if we want to use it with another type other than TodoItem, we simply can.
The List component is a pretty lean one. Just defines what data and template should be provided to the referenced template.
Creating the Card View
The Card View component is a little different compared to the List View component. Unlike list view, here ngTemplateOutlet will set the template and data for each TodoItem.
Like the List component, the card component is generic and we can use it with another entity in the future if we want.
Creating the Table View
Creating the table view is pretty similar to creating the card view.
What’s great about this setup is that the views are very open to customization. Also since List-Todo-Item, Table-Todo-Item and Card-Todo-Items are direct children of the Todo-list component, we can easily communicate with the parent for CRUD operations.
Note that since we have 3 views to choose from, we can let the user choose his/her favourite one in the UI container component.
This is the final setup.
As usual, you can find the Stackblitz demo below:
Usalin - Reusable Components Demo - StackBlitz
Build Angular Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
→ Micro-Frontends
→ Design System
→ Code-Sharing and reuse
→ Monorepo
Learn more:
- 10 Useful Angular Features You’ve Probably Never Used
- 11 Top Angular Developer Tools for 2020
- How We Build Micro Frontends
- How to Share Angular Components Between Projects and Apps
- How we Build a Component Design System
Create Customisable and Reusable Angular Components with Transclusion was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by ugur salin
ugur salin | Sciencx (2023-03-26T02:15:25+00:00) Create Customisable and Reusable Angular Components with Transclusion. Retrieved from https://www.scien.cx/2023/03/26/create-customisable-and-reusable-angular-components-with-transclusion/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.