Which @angular/* package(s) are relevant/related to the feature request?

language-service

Description

When automatically importing items into a component while typing in the template, components and directives are suggested in alphabetical order. I think it would be better to prefer a component import when possible.

Imagine a component library that provides a ButtonComponent and an AddButtonDirective to apply a preset to the button.

@Component({
  selector: 'app-button',
})
export class ButtonComponent {}

@Directive({
  selector: 'app-button[appAddButton]',
})
export class AddButtonDirective {}

When the language service suggests an automatic import, it prefers AddButtonDirective because it comes first alphabetically.

<!-- this should suggest ButtonComponent over AddButtonDirective -->
<app-button

Proposed solution

The language service should suggest the component over the directive in this case.

Alternatives considered

Alternative is to leave the element selector off of all directive selectors, but this is not always ideal or possible, as some directives might require a specific component host.