@Component

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.