Component composition in Angular2 — Part 1

What is component / directive composition?

  • Components. They are directives with a content defined in a template. They are the most common ones.
  • Attribute directives. They aim to change the appearance or behavior of a DOM element or a component.
  • Structural directives. They aim to change the DOM layout by adding and removing DOM elements. They are linked to the template element.

Defining attribute directives

Attribute directive

Applying attribute directives

  • The transparent one. Based on an HTML element or attribute, there is no need to add additional things to apply directives. Such an approach is used by Angular 2 for forms: directives are added under the hood on form and form elements (input, select, text area).
  • The explicit one. To apply directives, we need to specify this to add an additional attribute for example. For forms, this corresponds for example to the adding of the required attribute. In this case, a specific directive is applied.
Applying transparently an attribute directive
Applying explicitly an attribute directive

Usage in Angular 2

forms and the ngSubmit event

Linking and updating the host component

Interacting with the host from directives

Referencing the host component

Referencing the host class by dependency injection

@HostBinding decorator

@HostBinding decorator
  • propertyName: references a property of the host with the propertyName name.
  • attr.attributeName: references an attribute of the host with the attributeName name. The initial value is set to the associated directive property. Setting a value in the property updates the attribute on the corresponding HTML element. Using the null value at this level removes the attribute on the HTML element.
  • style.styleName: links a directive property to a style of the HTML element.
  • classNames: links a directive property to the classes of the HTML element. All the specified classes will be defined on the HTML element.
  • class.className: links a directive property to a class name of the HTML element. If the value is true, the class is added otherwise removed.
Usage of the @HostBinding decorator

@HostListener decorator

@HostListener decorator
  • eventName: the name of the event to register a method callback on.
Usage of the @HostListener decorator
  • window.eventName: for events linked to the window object.
  • document.eventName: for events linked with the document object.

Component composition and providers

Configuring providers for several components

Attribute directives and providers

Leveraging multiple providers

Multiple provider definition
Injecting a multiple provider

Changing styles of components

Directives and the :host selector


Freelance developer (github: templth) — Angular 2, React, Node addict and co-author of the “Angular 2 components” book at Packt Publishing.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thierry Templier

Thierry Templier

Freelance developer (github: templth) — Angular 2, React, Node addict and co-author of the “Angular 2 components” book at Packt Publishing.

More from Medium

Enable Smile serialization on requests using Spring WebClient (Kotlin)

AspectJ + Gradle — Retry Java Method on exception

Reactive WebSocket (with Spring Security, Spring-Cloud-Streams, Spring-Cloud-Functions)

Use ScheduledExecutorService to implement delayed tasks — delayed video release