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 thesmart anddumb component, orcontainer andcomponent. 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 callingcomponent to the piece of code that shows the data it's the most accurate way to name them. But...

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 acomponent have abehavior.

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 calledComponents 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? Whatshould they be? I proposeWidgets 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@inputs and@outputs. 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 thisissue)

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 justcomponents?

Yes. :). No more, not less. Justcomponents. 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 thatmanage information.

Why called themwidgets?

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.

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>  `,})exportclassTodoListWidget{@Input()publictodoList:ITodoItem[];}

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

import{Component,Input}from'@angular/core';import{ITodoItem}from'./../../models';

First of all, imports. From@angular/core we importinput andcomponent decorators. Remember, everything in Angular it's a decorator, so are Widgets, that name it's just sugar. There is not aWidget decorator, and I don't think that it should be one. From a model folder, the import of theItem model.

@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 suffixwidget 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.

exportclassTodoListWidget{@Input()publictodoList: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 aninput property and nothing else.

More examples

If you want a couple of more examples about Widgets, checkout my repoangular2-ultimate-starter. This is based ofAngularClass starter, but I addedngrx/store implementation, and a couple patters borrow from React, asWidgets.

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!