@Component

This is the documentation for Angular 7.
You can switch to the latest version Angular 10.

You can extend the HTML vocabulary of your templates with components that appear as new elements and attributes.

Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated per an element in a template.

Source

Component: <my-component></my-component>

@Component({
  selector: 'my-component',
  template: `Hello there!`
})
export class MyComponent {
}

Result

Component: Hello there!

Selector

The selector property of @Component declaration identifies this component in a template and triggers instantiation of the component.

Declare as one of the following:

element-name: Select by element name.
.class: Select by class name.
[attribute]: Select by attribute name.
[attribute=value]: Select by attribute name and value.
:not(sub_selector): Select only if the element does not match the sub_selector.
selector1, selector2: Select if either selector1 or selector2 matches.

Angular only allows component to apply on CSS selectors that do not cross element boundaries.