AngularJS Components Communication

Components are important parts of Angular’s way of creating a layout. Components are small parts of the layout with own logic. However, these parts are often dependent on each other. They need data from other ones, so they need to communicate.

This article describes how Angular components can communicate in two different situations, how components can share data from one class, how displayed data can be transformed without using class component and how to switch templates with routing.

The whole code of the app you can find on my Github.

components

If you need help with running the Angular app, go to my previous article.

Pass Data Between Components

The app presents two situations when communication between components is necessary:

  • when parent component contains a list of data and child component need one item of the list,
  • when two components are nested in another one and one of them needs data from the sibling.

Between Child and Parent

Let’s look at the below code.

This is a template of a parent component. The component shows a list of conferences. The code loops through the list to create a conference-item component as many as list items are. It passes the conference to the child component by property binding: [conference]=”conference”. ‘Conference’ on the right side is the item of conferences list. It is assigned to the property conference. Where is that property defined? This is not a property created by Angular.

ConferenceItemComponent class contains the property. However, a property in a component class is not enough to create a custom property used to the binding. The property must have a decorator @Input.

Between Siblings

It is a parent component for siblings: conference-list and conference-filter.

Conference-filter needs to pass data to the conference-list. Therefore when a user clicks on the filter button, conference-filter has to fire event with the data.

An object of EventEmitter class fires an event, but the event cannot be visible outside the component without @Ouput decorator. @Output decorator sets an event name and gives the possibility to handle the event in a parent component.

A parent component can pass then the desired property to the sibling component by custom property binding. This is explained how to achieve it in the previous subsection.

Share Data with Service

My previous article describes how to implement a form with cascading dropdowns that contains countries and cities. The conferences filter contains such dropdowns either. So the question is what to do to avoid data duplication? How to share data within components?

Data can be shared with a service class. This is a class which can be injected to a component via a constructor. Injection means creating an object of a concrete type by some mechanism, without using a new keyword.

AngularJS has such a mechanism. Objects of types can be injected if the types are passed to providers of a module.

Filter Displayed Data with Pipe

Let’s go back to the conference-list component.

As you can see next to the conferences list there is the following code: ‘| filterConferences:searchCriteria”‘. Here Angular executes a pipe called ‘filterConferences’ and passes searchCriteria variable to a pipe’s function.

In this case, the pipe is used to filter a list of conferences, so it transforms what is displayed depending on passed value. Angular has own built-in pipes either. A custom pipe must implement PipeTransform and must exist in a module’s declarations.

Display Different Templates with Routing

Routing is a way of creating a Single Page Application. This kind of app has only one HTML document which content is changed when URL is modified. In other words, the name of URL switches view’s templates.

URL has a static part of a name and dynamic one. The static part is a hostname because it is a mapped address of a place where is an app. The second part is the end of URL which can be changed. These different ends of URL are called routes.

Registration of routes is in the app’s module. Angular’s route must contain a path and component which template will be displayed.

When the app starts there is no route. Therefore it is necessary to register what app should display when URL doesn’t contain a route. In the below case, Angular will redirect to ‘template-driven-form’ route.

Router-outlet tag is a place where a route’s template is going to be rendered.

Conclusion

Angular has mechanisms to control displayed content (routing and pipe) and to work with data (components communication and sharing data with service).

Let’s again go through them:

  • communication parent-child – use @Input decorator to mark a property as ready to bind in a template,
  • siblings communication – use @Output decorator to emit an event with data outside a component; create a custom event handler in parent’s class and a property – pass it to a sibling component by property binding,
  • sharing data with service – create service class with data and register it in a module; inject it via a constructor,
  • transforming displayed data with a pipe – create a class which implements PipeTransform and register it in a module; use it next to the variable in a template; for example: “let conference of conferences | filterConferences:searchCriteria“,
  • showing different templates with routing – register routes in a module and add a router-outlet tag to set where templates will change.
0 0 vote
Article Rating
Share on
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments