Welcome to the lesson on component composition in Angular! In this lesson, we'll explore how parent and child components interact to create dynamic and reusable structures in Angular applications. Building on the foundational knowledge from previous lessons, we'll delve into content projection and component interaction, which are essential for creating flexible and maintainable applications. Let's get started! 🚀

In Angular, components can be nested within each other, forming a hierarchical structure. This allows for a clear separation of concerns and promotes reusability. A parent component can contain one or more child components, each responsible for a specific part of the application's functionality.

For example, consider a simple parent-child relationship:

TypeScript
Copy to clipboard
1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-child',
5  template: '<p>Child Component</p>'
6})
7export class ChildComponent {}
8
9@Component({
10  selector: 'app-parent',
11  template: '<app-child></app-child>'
12})
13export class ParentComponent {}

In this example, the ParentComponent includes the ChildComponent within its template. This nesting allows the parent to manage the child component's lifecycle and interactions, creating a cohesive structure.

Content projection is a powerful feature in Angular that allows a parent component to project content into a child component. This is achieved using the <ng-content> directive, which acts as a placeholder for the projected content.

Let's see how this works:

TypeScript
Copy to clipboard
1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-child',
5  template: `
6    <div>
7      <h3>Child Component</h3>
8      <ng-content></ng-content>
9    </div>
10  `
11})
12export class ChildComponent {}
13
14@Component({
15  selector: 'app-parent',
16  template: `
17    <app-child>
18      <p>This content is projected from the parent!</p>
19    </app-child>
20  `
21})
22export class ParentComponent {}

In this example, the ChildComponent uses <ng-content> to allow the ParentComponent to project its content. The paragraph inside the app-child tags in the ParentComponent is displayed within the ChildComponent, demonstrating content projection.

Angular allows you to use multiple <ng-content> elements within a child component's template, each with a select attribute to specify which content should be projected into each placeholder. This enables more complex content projection scenarios, including selecting by element type.

Here's an example:

TypeScript
Copy to clipboard
1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-child',
5  template: `
6    <div>
7      <ng-content select="header"></ng-content>
8      <h3>Child Component</h3>
9      <ng-content select=".body"></ng-content>
10      <button (click)="like()">I like this!</button>
11      <ng-content select="footer"></ng-content>
12    </div>
13  `
14})
15export class ChildComponent {}
16
17@Component({
18  selector: 'app-parent',
19  template: `
20    <app-child>
21      <header>Header Content</header>
22      <div class="body">Body Content</div>
23      <footer>Footer Content</footer>
24    </app-child>
25  `
26})
27export class ParentComponent {}

In this example, the ChildComponent uses three <ng-content> elements, each with a select attribute targeting specific element types: header, footer, and the body class. The ParentComponent provides content using these element types, and Angular projects each piece of content into the corresponding <ng-content> placeholder in the ChildComponent. This approach allows for more structured and organized content projection based on element types.

The @ViewChild decorator in Angular enables a parent component to access and interact with a child component's properties and methods. This is useful for calling methods or accessing data within the child component.

Here's how you can use @ViewChild:

TypeScript
Copy to clipboard
1import { Component, ViewChild } from '@angular/core';
2
3@Component({
4  selector: 'app-child',
5  template: '<p>Child Component</p>'
6})
7export class ChildComponent {
8  greet() {
9    alert('Hello from child component!');
10  }
11}
12
13@Component({
14  selector: 'app-parent',
15  template: `
16    <app-child></app-child>
17    <button (click)="callChildGreet()">Call Child's Greet Method</button>
18  `
19})
20export class ParentComponent {
21  @ViewChild(ChildComponent) childComponent!: ChildComponent;
22
23  callChildGreet() {
24    this.childComponent.greet();
25  }
26}

In this example, the ParentComponent uses @ViewChild to access the ChildComponent instance. By calling callChildGreet(), the parent can invoke the greet() method in the child, demonstrating how components can interact.

When working with parent and child components, it's important to follow best practices to ensure your application remains scalable and maintainable. Here are some tips:

• Separation of Concerns: Keep components focused on a single responsibility. This makes them easier to understand and maintain.
• Avoid Tight Coupling: Design components to be as independent as possible. This allows for easier reuse and testing.
• Use Input and Output Decorators: Facilitate communication between components using @Input and @Output decorators, as covered in previous lessons.

By adhering to these practices, you can create robust and flexible Angular applications.

In this lesson, we've explored the concepts of component composition, content projection, and component interaction in Angular. By understanding how to use <ng-content> and @ViewChild, you can create dynamic and reusable components. As you move on to the practice exercises, remember to apply these concepts and experiment with different component interactions. Keep up the great work, and continue exploring the exciting world of Angular! 🌟