Widgets and Components for Angular 2 and up
Tags: angular, widgets, components, webcomponents
Published: 2017-03-10 17:06:04

---
title: Widgets and Components for Angular 2 and up
published: true
description: A review about React components and containers, but for Angular 2.
cover_image: 
tags: angular, widgets, components, webcomponents
---

## Intro
If you are comming from React, the React community as develop some patterns that made easy and simple to develop apps with this framework. One of this patterns is the _smart_ and _dumb_ component, or _container_ and _component_. This keeps a separation between how a component should display the data, and how a component actually manage the data. If you want more about this, there are plenty of articles about it, this is not what I'm writing about.

## Situation
The actual name for a piece of web page according to the standard it's "web component", so one might think that calling _component_ to the piece of code that shows the data it's the most accurate way to name them. But...

![I reject nature](https://i.imgflip.com/1l5mqr.jpg)

Angular community had develop their own way of thinking about what a component is, and in the Angular community I had see so many times that a _component_ have a _behavior_. 

> What?! This is just insane. A component should concern only about how to display the data, no how to manage it.

Well, it is true. The only fact that Angular components are called _Components_ it's one of the examples to show my point of view. Still, we need some way to manage the display of the data. 

## Solution proposal
I know this would be only another solution proposal, and mine doesn't actually adds anything to current implementation, it's just syntactic sugar for the same thing.

### Introducing Widgets
So... Widgets? What _should_ they be? I propose _Widgets_ to name anything that only should concern about how to display something. And this it's something that Angular it's great at, separation. I'm not saying that React it's bad about it, but I think that the Angular team had a better approach to this issue.

Ideally a Widget should have only `@input`s and `@output`s. That's all. A Widget had to be made to show info, and it have to be a component that reflects that in their code. There should be no logic inside a Widget, but the logic that a Widget need to show the data that is being inputed. 

I also think about the way that the data should be managed inside the Widget, but that would be for another day (Or you can read this [issue](https://github.com/mgechev/codelyzer/issues/222))

### What widgets should be
- Widgets should be the presentation components of and Angular application.
- Widgets should be logicless.
- Widgets should be concern about the style of their own data.

## Questions

##### Widgets are just _components_? 
Yes. :). No more, not less. Just _components_. They have to show information, but they should not care about how the information it's being provide for them. 

##### Why another name then?
As I said, _component_ in Angular community had been used for development of piece of web pages that *manage* information. 

##### Why called them _widgets_?
Cause, after all, _widgets_ actually are made to show information, so it's seems logical to call them that way.

## Examples
There should not be one motivation for use a name proposal without an example, and that's what I'm going to give you. 

```ts
import { Component, Input } from '@angular/core';

import { ITodoItem } from './../../models';

@Component({
  selector: 'my-todo-list-widget',
  template: `
  <ul>
    <my-todo *ngFor="let todo of todoList;trackBy:todo?.id"
      [todo]="todo"
    ></my-todo>
  </ul>
  `,
})
export class TodoListWidget {
  @Input() public todoList: ITodoItem[];
}
```

This is a simple case of use. I'll try to explain the code.

```ts
import { Component, Input } from '@angular/core';

import { ITodoItem } from './../../models';
```
First of all, imports. From `@angular/core` we import `input` and `component` decorators. Remember, everything in Angular it's a decorator, so are Widgets, that name it's just sugar. There is not a `Widget` decorator, and I don't think that it should be one. From a model folder, the import of the `Item` model. 

```ts
@Component({
  selector: 'my-todo-list-widget',
  template: `
  <ul>
    <my-todo *ngFor="let todo of todoList;trackBy:todo?.id"
      [todo]="todo"
    ></my-todo>
  </ul>
  `,
})
```
So we decorate. I use the suffix `widget` for the selector, cause I had a component with the same name. So if you can name things better than I do, you should not need that. Also, the template, the less, the better. I think that if your template it's less than 10 lines, you should inline it. But, it's up to you. What is important it's to define all the display behavior here.

```ts
export class TodoListWidget {
  @Input() public todoList: ITodoItem[];
}
```
Finally, we declare the class. This is the important part. As you can see, there is not logic here. It's just a class requesting an `input` property and nothing else. 

#### More examples
If you want a couple of more examples about Widgets, checkout my repo [angular2-ultimate-starter](https://github.com/michaeljota/angular2-ultimate-starter). This is based of `AngularClass` starter, but I added `ngrx/store` implementation, and a couple patters borrow from React, as `Widgets`.

## Thanks you
This is all for now. This is my first post, like ever, about Angular. I hope you enjoy this, and for anything you have to say about this, I'm looking forward to read your comments. Cheers and happy coding!