Last time we talked about @Attribute decorator in Angular, the one of the least known and least used but the powerful one. Today we will switch a bit from decorating your Angular code to web components. Let’s learn about making a collapsible accordion web component with Angular Elements.
Web components are custom made tags which extend HTML’s capabilities. Steps to make a web component:
- Setup a new angular project using the angular cli.
ng new accordion --prefix custom --routing=false
- Configure app.module.ts and prepare for elements.
In the @NgModule decorator, remove the bootstrap property and add the
entryComponentsarray with your custom components.
- Add the HTML markup.
Slots can be used when you want content to be placed in specific locations in your template.
- Add the styles
This is just personal preferences and your CSS skills.
- Add the toggle logic in the typescript file.
- Build and make a single package.
This will generate your web component in the dist/ folder.
- Using your web component.
Open the index.html file in chrome and admire your newly made web component.
If you are going to make a very complex component, angular elements might be a good choice. For simple components, you can use a component compiler like Stencil, Polymer, etc. or just plain JS to make your web component. For more examples check here.
Talking about Angular, take a look at Angular InstantSearch library for creating search UIs.