@Component({
selector: 'app-component-selectors', //This is example of type selector selector
templateUrl: './component-selectors.component.html',
styleUrl: './component-selectors.component.scss'
})
export class ComponentSelectorsComponent {
}
Component Selectors
Every component defines a CSS selector that determines how the component is used
Code Snippet
Angular performs component matching during compilation, not while your application runs. This means,
- Static Matching: Angular analyzes your component selectors in your TypeScript code before running the application.
- DOM Changes Don't Affect Matching:: Modifying the DOM structure after compilation (using Angular bindings or DOM manipulation APIs) won't change which components are rendered.
- Unique Matching: Each DOM element can only match one component selector. If multiple selectors match a single element, Angular throws an error.
Component selectors are case-sensitive.
Types of selectors
| # | Selector type | Description | app-component-selectors |
|---|---|---|---|
| 1 | Type selector | Matches elements based on their HTML tag name, or node name. | mdo |
| 2 | Attribute selector | Matches elements based on the presence of an HTML attribute and, optionally, an exact value for that attribute | [dropzone] [type="reset"] |
| 3 | Class selector | Matches elements based on the presence of a CSS class. | .menu-item |
Combining selectors
You can combine multiple selectors by concatenating them. For example, you can match
Code Snippet
@Component({
selector: 'button[type="reset"]', //combine selector
...
})
export class ResetButton { }
Code Snippet
@Component({
selector: 'test-zone,example,button[type="reset"]', //combine selector (multiple)
...
})
export class ResetButton { }
Leave a Comment
This sample demonstrates the full features of Rich Text Editor that includes all the tools and functionalities.
Comments