From Angular 1.x ng-repeat to Angular 2 NgFor with Component

In the recent article, I wrote about the migration process of a component that is based on angular 1.x and ES2015. Since then, I continued migrating Echoes Player to angular 2. In this post i'm sharing the migration process of the youtube-list component - which uses the youtube-media component, as well as implementing a smart component with angular 2.

The Youtube-List Component

The goal for this process was to reuse the recent youtube-media component and create a youtube-list component. Echoes Player main feature is displaying a list of youtube videos like the following:

Screen Shot 2016-01-29 at 11.18.58 AM

The angular 1.x ES2015 implementation of youtube-list is a core/component element. It is relatively a minimal component which reuse the youtube-media component. The template uses "ng-repeat" to render a list of videos:

This is the directive definition:

The Angular 2 YoutubeList Component

The result of this component in angular 2 is not so far from its angular 1.x version. However, the migration process of this component involves few points to consider.

Importing Relevant Dependencies

With angular 2, each dependancy must be defined. That includes:

  1. angular's 2 built in directives: NgFor (instead of ng-repeat)
  2. the youtube-media component
  3. angular's 2 annotations & docorators (@Component, @Input etc..)

Let's import all of these:

Note: "NgFor" is the new "ng-repeat" in angular 2. More on that below.

Define The Component and its dependencies

This code defines how the youtube-list component will be used, its template, its input and which directives it consumes.

Notice how "NgFor" is injected to this component's directives array. If it's not defined as such, angular 2 template engine won't use it.

The YoutubeList Controller Class

The controller class in angular 2 of this component, is quite similar to its angular 1.x version. The noticeable addition is the definition of the events that this component exposes.

Youtubelist Component Template

This component's template is quite simple. It repeats the youtube-media component following the "list" property.

Lets overview the "NgFor" directive usage in this template.

First, you notice that i'm using the syntactic sugar form of ngFor using the "*". It makes it easier to read (and yes - it's valid html attribute). This "*" form is almost similar to the angular 1.x "ng-repeat". The value of this attribute is actually almost similar for ES2015 "for of" loop, however, with little micro-syntax inside.

The "#" sign, is used to defined local in-context variable that will be used throughout the iteration, which we can reference to in other places inside the template. In this template, the "media" variable is used to reference each time a different item in the list array.

The exposed events: "play", "queue" and "add", pass the relevant "media" variable that was eventually clicked inside the youtube-media component.

Using the YoutubeList Component

Using this component should be simple. I designed it so I can use it like so:

Notice how the "play" event passes the "$event" argument - which will eventually be the selected media. This is a very important point to realise. In contrary to the "ngFor", there's is no reference in this context to a "video" property, but rather only to "videos" array. Referencing "media" here won't work (as we've probably did in angular 1.x).

In practice, I created a "youtube-videos" smart component - a component that is rendered without any attributes, and it is attached to a certain route (currently the index route). This component initiates an http request call to youtube's api and upon response, saves the result in a "videos" property.

Final Thoughts

You can follow the full code commits of youtube-list commits in github.

Echoes Player with ng2 is an open source project that you can follow, fork and overview at github.

If you're still using angular 1.x and looking to migrate in the future to angular 2, I encourage you to start writing angular 1.x with ES2015 and following a style guide. You can overview the ES2015 branch of Echoes (at production http://echotu.be) to see it in action.