How to Input a Component into Another Component in Angular?

In Angular, you can input a component into another component using the @Input decorator. The @Input decorator allows you to define a property on the child component that can be set from the parent component's template.

Input a Component into Another Component in Angular

Here's an example of how you might use the @Input decorator to pass data from a parent component to a child component:

Parent Component

In the parent component's class file, you can define a property that you want to pass to the child component.

export class ParentComponent {
  public message: string = "Hello from parent";
}

Parent Component's Template

Now you can pass this property to the child component using the property binding syntax.

<app-child [message]="message"></app-child>

Child Component

In the child component's class file, you can use the @Input decorator to define a property that will receive the data passed from the parent component.

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <p> {{ message }} </p>
  `,
  styles: []
})
export class ChildComponent {
  @Input() message: string;
}

Child Component's Template

Now you can access this property inside the child component template to display the passed data.

<p> {{ message }} </p>

It's important to note that you can also pass the data directly to the child component class like this

<app-child [message]="'Hello from parent'"></app-child>

This is a very simple example, but you can use the @Input decorator in more complex scenarios to pass multiple properties, objects, or even custom events.

Integrate Two Components in Angular

In Angular, you can integrate two components in several ways depending on the desired relationship between the components. Some common ways to integrate two components in Angular are:

• Using a parent-child relationship: You can use the @Input and @Output decorators to pass data and events between a parent component and its child components. The parent component can define properties and events that can be bound to the child component's template and the child component can emit custom events that can be handled by the parent component.
• Using a sibling relationship: You can use a shared service to communicate between two sibling components. The service can provide a way for the two components to share data and emit events to each other.
• Using a shared module: If two or more components are closely related and are always used together, you can put them into a shared module which allows you to group related components, directives, and pipes together.

Here's an example of how to integrate two components using a shared service:

1. Create a shared service

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private messageSource = new Subject<string>();
  message$ = this.messageSource.asObservable();
  sendMessage(message: string) {
    this.messageSource.next(message);
  }
}

2. Inject the shared service in the two components that need to communicate with each other

import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-first-component',
  template: `
    <button (click)="sendMessage()">Send Message</button>
  `,
  styles: []
})
export class FirstComponent {
  constructor(private sharedService: SharedService) { }
  sendMessage() {
    this.sharedService.sendMessage("Hello from first component!");
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';
@Component({
  selector: 'app-second-component',
  template: `
    <p>{{ message }}</p>
  `,
  styles: []
})
export class SecondComponent {
  message: string;
  constructor(private sharedService: SharedService) {
    this.sharedService.message$.subscribe(message => {
      this.message = message;
    });
  }
}

3. You need to include both components in a common module to make sure they have the SharedService available.

This is a very simple example, but you can use this approach to communicate between any number of components in an Angular application. Shared services can also be used to communicate between multiple modules as well.