@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
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 thesub_selector
.selector1, selector2
: Select if eitherselector1
orselector2
matches.
Angular only allows component to apply on CSS selectors that do not cross element boundaries.