The component selector - lordoftheflies/angular-essential-training GitHub Wiki

Angular will use the selector property from the component metadata to find a match in the Dom based on an element name. If we take a look at the app component, we can see that it has a selector with the value of app dash-root. And if we flip over to our index.html file, we can see that we have a Dom element named app-root. As we learned in an earlier lesson over in the main.ts file, angular kicks off with the bootstrap call that takes in an angular root module. And in the app.module.ts file, the root module has a bootstrap metadata property that contains a list of components to use as the starting component. So with the markup we have in the index.html file, this bootstrap process tells angular to look over the initial Dom on the page, take the selector from the app component and find the first match. Angular finds the app-root element and applies the app component to that element. The bootstrap function will only load the component on the first match it fines. It will not bootstrap multiple instances of the same component type. This is a bit different from how components nested in components work. This will get covered in an upcoming lesson. Okay. The app component selector is named app-root. But what if you wanted to use a different custom element name value, like say just the term app? The W3C spec states that custom Dom elements should use at least one dash in their names. And when you create angular components, you're essentially creating support for new custom Dom elements. So when you write your selectors for components, you want to use dashes between words. And since we are making use of the angular CLI which follows the style guide on the angular.io site,