Angular Shorties #1 — The Host Attribute

The host attribute in the component descriptor (everything we put in the Component decorator) is the beating heart of the Angular’s bindings magic. It used to replace all the old decoration based binding (HostBinding for example).

The syntax is shared with the one in the template. Basically, it’s the part of the “template” that deal with the host component, means, the component itself and not with its view and/or its content.

@Component({
  selector: 'foo-bar',
  host: {
    // what we | what we 
    // want to | bind to
    // bind    |
    '(click)': 'handleClick()'
  },
  template: '',
})
class FooBar {
  handleClick() {}
}

What can we bind?

Events

Any DOM events, and not only local ones, but also global ones.

@Component({
  host: {
    // local events -> event handler (method)
    '(mouseenter)': 'startHover()',
    '(mouseleave)': 'stopHover()',

    // global events -> event handler (method)
    '(window:resize)': 'onResize($event)',
    '(document:click)': 'handleClickOn($event.target)'
  },
})

Attributes

Any DOM Attribute, and attributes fields and even style variables.

@Component({
  host: {
    // static binding
    'aria-desc': '"static description"',

    // one way binding (variables, signals and methods)
    '[class]': 'classes()',

    // binding attribute fields and style variables
    '[style.background-color]': '"red"',
    '[style.--variable-name]': 'foo',
  },
})

The style part of the host is almost equivalent to the :hostin the style part, threr is no binding:

@Component({
  styles: `
    :host {
      background-color: 'red';
      --variable-name: 'we can not bind value here, just use static one'
    }
  `
});

As a result, the binded values reflects in the DOM itself:

<some-component class="<the results of the method classes()>"  
                aria-desc="static description"
                style="background-color:red; --variable-name: white"

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 200k supporters? We do not get paid by Medium!

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok and Instagram. And before you go, don’t forget to clap and follow the writer️!