he Twitter developer community is one of the best developer hangouts that I came across. I recently started being more active and I am finding it a lot of fun, learning, and inspiration.
The following tweet by Alex Inkin inspired me to write this article.
The snippet above is an Angular directive that can be used to resize any table columns. I personally find this incredibly useful and will set a really good example in learning Angular directives and rxjs basics.
Let’s get to it
The plan
The basic idea here is nothing fairly simple. We are going to take the following steps to achieve this.
Note:_ idth of a table column is effectively the width of the respective header cell(
_<th>_)._
- Introduce more templates to
<th>element by creating a new component. - Style these templates to reflect the table border styles.
- On dragging the along the border, increase/decrease the width of
<th>element.
Creating the component
The whole point here is to have pseudo(so to say) templates in the table header cell. For this reason, we need to introduce a new component with the template.
ng generate component resizable
Let’s introduce our template to it
You see that we are using content projection here and interestingly we also have a custom event named resizable on the .bar element.
Implementing the controller
#programming #javascript #front-end-development #angular
