In Angular, a child component is a component that is embedded within another component. The parent component contains the child component, and the child component can communicate with the parent component through input and output bindings.
To create a child component in Angular, you need to first define the child component by using the @Component
decorator. Then, you can include the child component in the parent component's template by using its selector as a tag.
For example, let's say you have a parent component that displays a list of items, and you want to create a child component to display each item in the list. You can create a child component called item-component
and define it like this:
typescriptimport { Component, Input } from '@angular/core';
@Component({
selector: 'item-component',
template: `
<div>
<h2>{{title}}</h2>
<p>{{description}}</p>
</div>
`
})
export class ItemComponent {
@Input() title: string;
@Input() description: string;
}
In the parent component's template, you can include the item-component
like this:
html<item-component *ngFor="let item of items" [title]="item.title" [description]="item.description"></item-component>
This will create an instance of the item-component
for each item in the items
array, and pass the title
and description
properties to each instance using input bindings.
Comments
Post a Comment