Angular Fundamentals: Communicating Between Components

Welcome back to this review of the Pluralsight course Angular Fundamentals by Jim Cooper and Joe Eames. Excluding the 2 minute course overview, there are 16 modules in this course and we have reached the 7th module: Communicating Between Components. This is a real short module at on 11 minutes and 38 seconds.

The previous modules are:

• Getting Started With Angular
• Creating and Communicating Between Angular Components
• Exploring the Angular Syntax
• Creating Reusable Angular Services
• Routing and Navigating Pages
• Collecting Data with Angular Forms and Validation

All of these modules are produced and narrated by Jim Cooper, and he continues his tuition in this module.

The Angular Fundamentals course is an intermediate level course and is the 5th course on the Angular Learning Path.

Passing Data into a Child Component

In our template we reference a session-list component, and set it to retrieve a list of sessions for display:

<session-list [sessions]=”event?.sessions”><session-list>

Jim creates the session-list component in this clip. The main takeaway here is passing data from one component into a sub-component is pretty easy. The Angular: Getting Started course also demonstrates a similar thing to this.

Passing Data out of a Child Component

Here we make it so that we can create sessions from our event details page, started with a link to add a session, with an addSession() click handler.

Jim creates the concept of an “add mode” where we can do our session creation.

This clip is quite a bit more involved than the previous one, and it’s best that you just watch it to see what’s going on.

By the end of the clip we can see we can cancel out of the Add Session page,

Unfortunately there are no practice exercises to accompany this module :-(

The next module in this course is Reusing Components with Component Projection.