what is host property in directives and how to know this details

Question

Hi I using angular 8 with ng-bootstrap to add table in my project
I find this code that I didn't understand very well

  @Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
    }
  })

can anyone tell me what the code say?
and what "th" mean in selector.
also host can i change it to something else because the editor say that, is it Old property or what
Thanks to all

Answer 1

As per Angular documentation:

selector

selector: The CSS selector that identifies this directive in a template and triggers instantiation of the directive.

So in your code selector: 'th[sortable]' selector declares select by th element name with [sortable] attribute. You should find something like <th sortable>... in your html file.

UPDATE to answer the comment: As per link shared in comment, here is the th sortable in html code:

host

host: Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs.

host: {
    [key: string]: string;
}

It's preferable to use @HostBinding and @HostListener instead of host by angular style guide, check this link for more details.

To replace host in your code:

@HostBinding allows you to set properties on the element or component that hosts the directive. So it will replace your [class.asc] and [class.desc] code with the following inside your directive:

@HostBinding('class.asc') direction = 'asc';

@HostBinding('class.desc') direction = 'desc';

@HostListener allows you to listen for events on the host element or component. So your '(click)' code will be replaced with the following inside your directive:

@HostListener('click') rotate() { 
  // todo:  
}

Answer 2

Firstly, you should understand what's the difference between a directive and a component.

Unlike components, directives do not require a view. They should be responsible for rendering logic: adding/removing elements and/or adding custom behavior to DOM elements or components.

th[sortable] - think of it as a normal CSS selector. This would be translated into: A th element with a sortable attribute: <th sortable></th>. If the selector was comma-separated(th,[sortable]) it would mean that you either use your directive as th or <any-comp sortable></any-comp> or <th sortable></th>.

The host property, as mentioned in the documentation

Maps class properties to host element bindings for properties, attributes, and events, using a set of key-value pairs.

where the host element is the element/component you have attached your directive to.

However, you can achieve the same results by using HostBinding and HostListener.

With this in mind, you code could look like this:

@Directive({ ... })
export class YourAwesomeDirective {
 @HostBinding('class.asc')
 get ascClass () {
  return this.direction === 'asc';
 }

 @HostBinding('class.desc')
 get descClass () {
  return this.direction === 'desc';
 }

 @HostListener('click', '[$event]')
 onClick (ev) { /* ... */ }
}