Componentes hijos en Angular

Como se mencionó al principio del tutorial, en Angular todo el proyecto se divide en componentes. En lecciones anteriores trabajamos solo con el componente principal, creado por defecto. Ahora aprendamos a crear componentes hijos.

El código de nuevos componentes se genera automáticamente por Angular mediante un comando especial de terminal: generate component. Después de la palabra component debemos escribir el nombre de nuestro nuevo componente. Supongamos que queremos generar el componente user:

ng generate component user

Después de ejecutar el comando, veremos que tenemos una nueva carpeta app/user. En ella estarán todos los archivos estándar del componente.

En el archivo del componente user.component.ts se creará automáticamente un decorador de componente:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

También en este archivo se creará automáticamente la clase del componente:

export class UserComponent {

}

Ahora nuestro componente hijo debe ser conectado al componente padre. Supongamos que el padre es el componente app, presente inicialmente en la instalación del framework. Importemos nuestro componente en él:

import { UserComponent } from './user/user.component';

En el decorador del componente, en la clave imports especificaremos nuestro componente importado:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // aquí
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Ahora podemos mostrar el contenido del componente hijo en el componente padre. Para esto, en el archivo de la plantilla del padre debemos escribir una etiqueta especial, cuyo nombre está definido en la propiedad selector del decorador @Component del componente hijo. En nuestro caso, es la etiqueta app-user. Escribámosla en la plantilla del padre:

some text
<app-user></app-user>

Genere el componente ProductComponent. Conecte este componente al componente principal de su proyecto.

Realice cambios en la plantilla del componente hijo. Asegúrese de que se apliquen en el navegador.

Cambie los estilos CSS del componente hijo. Asegúrese de que se apliquen en el navegador.

En el componente hijo, cree las propiedades name y price. Muestre sus valores en la plantilla del componente hijo.