Nested Components

In Angular, a component controls a patch of the screen called a view. We can create reusable components and organize them hierarchically. This hierarchy of Angular components is what we call 'Nested Components'. A nested component, or a child component, is a smaller component that is included in a larger, or parent, component.

What are Nested Components?

Nested components are Angular components that are placed within other components. These components allow you to create more complex UI structures while keeping the individual components simple and focused.

The parent component can interact with the child components and vice versa. This can be done through Input and Output properties, which allow data to flow from the parent to the child and events to flow from the child to the parent.

Creating a Nested Component

To create a nested component, follow the steps below:

1. First, we need to generate a new component. We can do this by using the Angular CLI command ng generate component child. This will create a new child component.

2. Next, we need to add the selector of the child component in the parent component's template. The selector is the name given in the @Component decorator of the child component.

<!-- parent.component.html -->
<div>
    <app-child></app-child>
</div>

In the above code, app-child is the selector of our child component.

Interaction Between Parent and Child Components

Using @Input()

The @Input() decorator allows data to flow from the parent component to the child component.

To use @Input(), declare a variable in the child component and decorate it with @Input().

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ parentData }}</p>
  `,
})
export class ChildComponent {
  @Input() parentData: string;
}

Then, in the parent component's template, bind the child selector's attribute to the property that you want to pass to the child.

<!-- parent.component.html -->
<div>
    <app-child [parentData]="valueToPass"></app-child>
</div>

Using @Output() and EventEmitter

The @Output() decorator and EventEmitter allow the child component to emit custom events to the parent component.

To use @Output() and EventEmitter, declare a new EventEmitter in the child component and decorate it with @Output().

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="emitEvent()">Click me</button>
  `,
})
export class ChildComponent {
  @Output() childEvent = new EventEmitter<string>();

  emitEvent() {
    this.childEvent.emit('Hello from child!');
  }
}

Then, in the parent component's template, bind the child selector's event to a method that will handle the event.

<!-- parent.component.html -->
<div>
    <app-child (childEvent)="handleChildEvent($event)"></app-child>
</div>

And in the parent component's class, we add the handleChildEvent() method:

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  
  handleChildEvent(event: string) {
    console.log(event);
  }
}

This is just a basic introduction to nested components in Angular. There are many more aspects and functionalities to explore, like lifecycle hooks, ng-content, ViewChildren, and ContentChildren. Happy coding!