Un selector es una de las propiedades del objeto que usamos junto con la configuración del componente.
Se utiliza un selector para identificar cada componente de manera única en el árbol de componentes, y también define cómo se representa el componente actual en el DOM HTML.
Cuando creamos un nuevo componente usando CLI angular, el componente recién creado se ve así.
12345678910import{Componente}de$0027@angular/núcleo$0027;@Componente({ selector:$0027mi-app$0027, templateUrl:$0027./app.component.html$0027, styleUrls:[$0027./app.component.css$0027]})exportclassAppComponente{ nombre =$0027Este es un componente simple$0027;}tipografía
Aquí en app.component.ts, observe que tenemos una propiedad llamada selector junto con el nombre único utilizado para identificar el componente de la aplicación en el árbol HTML DOM una vez que se renderiza en el navegador.
Una vez que ejecutamos nuestra aplicación Angular en el navegador, podemos abrir las herramientas de desarrollo del navegador e ir a la pestaña Elementos, donde podemos ver el componente renderizado, así.
Como pueden ver, el se renderiza inicialmente porque el componente de la aplicación es el componente raíz de nuestra aplicación. Si tenemos algún componente hijo, entonces todos se renderizan dentro del selector padre.
Básicamente, la propiedad de selección del componente es sólo una cadena que se utiliza para identificar el componente o un elemento en el DOM.
Por defecto, el nombre del selector puede tener una aplicación como prefijo en el momento de la creación del componente, pero podemos actualizarlo. Tenga en cuenta que dos o más selectores de componentes no deben ser iguales.
Veamos las diferentes formas en que podemos usar el selector en Angular.
Además, los selectores son muy útiles para mantener la coherencia en cuanto a los nombres del selector de componentes y las especificaciones personalizadas.