Angular 18 Full Course (part 16) - Complete Zero to Hero Angular 18 full Tutorial

Introduction

In this tutorial, we will explore how to share data between parent and child components in Angular 18 using different approaches. We will cover the ViewChild decorator, the Output decorator with EventEmitter, and the NG content for content projection. These concepts are crucial for building dynamic and efficient Angular applications.

Step 1: Understanding ViewChild Decorator

• The ViewChild decorator allows the parent component to access properties and methods of a child component directly.
• This approach is useful when the child component has a limited number of variables.
• However, if the child component has many variables, accessing just one can slow down the application as it searches through all variables.

Practical Tip

• Use ViewChild when you need direct access to the child component's properties but avoid it for components with numerous properties to prevent performance issues.

Step 2: Using Output Decorator and EventEmitter

• The Output decorator enables the child component to emit events to the parent component.
• Instead of giving full access to the child, the child sends only the required data to the parent.

Steps to Implement

1. In the child component, define an EventEmitter:

   @Output() customEvent = new EventEmitter<string>();
   

2. Emit the data when an event occurs:

   this.customEvent.emit(data);
   

3. In the parent component, listen for the emitted event:

   <child-component (customEvent)="handleData($event)"></child-component>
   

Step 3: Content Projection with NG Content

• NG content allows the parent component to pass entire blocks of HTML to the child component.
• This is useful for creating reusable components that can display different content types.

Steps to Implement

1. Create a new component, e.g., Card:

   ng generate component card
   

2. In the card component HTML, add the NG content tag:

   <ng-content></ng-content>
   

3. Use the card component in the parent component and pass content:

   <app-card>
       <p>This is loaded using NG content</p>
   </app-card>
   

Step 4: Multi-slot Content Projection

• For more complex layouts, you can use multiple NG content tags with unique identifiers.

Steps to Implement

1. In the child component, define multiple NG content tags with identifiers:

   <ng-content select="[header]"></ng-content>
   <ng-content select="[body]"></ng-content>
   <ng-content select="[footer]"></ng-content>
   

2. In the parent component, pass specific content to each slot:

   <app-card>
       <span header>Username</span>
       <div body>User details</div>
       <button footer>Profile</button>
   </app-card>
   

Conclusion

In this tutorial, we covered how to facilitate communication between parent and child components in Angular using various methods. By leveraging the ViewChild decorator, Output decorator with EventEmitter, and content projection with NG content, you can create more efficient and reusable components. As you continue to build Angular applications, experiment with these techniques to improve your component architecture.