The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Container and Presentation Components Using Angular Component Bindings

Container and Presentation Components Using Angular Component Bindings

6:09
Angular 2 introduces the concept of inputs and outputs as a mechanism for components to communicate. The most significant advantage of this is that we can create presentation components that are void of any imperative logic as they rely entirely on their parent container component. We will learn how to create inputs and outputs in Angular 1 using isolated scope and the component binding syntax.
Watch this lesson now
Avatar
egghead.io

Angular 2 introduces the concept of inputs and outputs as a mechanism for components to communicate. The most significant advantage of this is that we can create presentation components that are void of any imperative logic as they rely entirely on their parent container component. We will learn how to create inputs and outputs in Angular 1 using isolated scope and the component binding syntax.

Avatar
Michael

Why bother with controllerAs ? Isn't leaving it out & using $ctrl less boilerplate

In reply to egghead.io
Avatar
Lukas

There are tradeoffs but in general, I think $ctrl is totally fine. The downside is that there may be existing conventions that you need to preserve as well $ctrl is not as self-documenting as explicitly setting it yourself. This is not something that would ruin or friendship if you went with one or the other. :D

In reply to Michael
Avatar
Przemysław

Actually this clip misses a small information about a default controller which is mentioned in previous posts. For people who did see angular documentation (before watching the lesson) it could not be so obvious from were this controller come from. Especially that w rename it by controllerAs. I could be a small statement that $ctrl is a default controller for all components and in this specific example we will take this default and rename it to .....

Avatar
Stephen

I noticed that too. Maybe its because you might end up with lots of nested components with their own controllers and you need to keep them distinct?

In reply to Michael
Avatar
Ionut-Valentin Mitrache

Why do you pass in an object in the .selected callback ( categoryItemCtrl.selected({category: categoryItemCtrl.category}) ) when you can pass in the categoryItemCtrl.category? This does not make any sense to me. Please explain.

Avatar
Lukas

This is one of the idiosyncrasies of expression binding... in order to pass values to the parent component, you have to do so via an object map. This is necessary because of how Angular is parsing what is essentially a string and turning it into a callable function.

From the documentation...

Often it's desirable to pass data from the isolated scope via an expression to the parent scope. This can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount: 22}).
In reply to Ionut-Valentin Mitrache
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?