Beyond the Basics: Create custom HTML elements using Angular Elements
Submitted by Diwanshi Pandey (@diwanshipandey) on Monday, 4 February 2019
Technical level: Intermediate
Have you ever played with Legos or have built something amazing with them? Imagine how much easier front-end web development would be if your HTML elements were just like lego blocks and you could use your imagination and combine them together to create something amazing and use them wherever you want and however you want. Let’s go beyond the basics and try creating framework independent web components.
Talk Duration: 30 - 45 Mins
The talk will include the introduction to Angular Elements which provides Angular components as framework-independent web components. In a snap, now you can create custom web components and package them in a way that you don’t need to use any framework. They can also work with your plain html.
After the introduction, I’ll be showing a demo of a web component for ex: a multi select dropdown which I’ll start with basic dropdown component and I’ll start adding customization one by one for instance, text or background color, the title text, sorted values, scroll, etc.
Once finished customization I’ll show how to package it as an independent component which users just need to import in their html file and start using it.
If time permits, I’ll take any Questions and answers.
Diwanshi is an Application Developer at RedHat and a Mozilla Tech Speaker. You can talk to her about modern open web technologies, Privacy and Security over the web. She also loves to talk about different cultures and cuisines and give it a try in her free time.