Understanding the Code Examples

Using @ViewChild and ViewChild:

• Import: Import the ViewChild or ViewChildren decorator from @angular/core.
• Decorate: Decorate the target component class with @ViewChild or @ViewChildren, passing the component class or selector as a parameter. This creates a reference to the child component instance.
• Call Function: Access the child component's reference and call its function directly.

Example:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child #child></app-child>
    <button (click)="callChildFunction()">Call Child Function</button>
  `
})
export class ParentComponent {
  @ViewChild('child') childComponent: ChildComponent;

  callChildFunction() {
    this.childComponent.childFunction();
  }
}

Using @Input and @Output:

• Define Input: In the child component, define an input property using the @Input decorator. This property will be used to pass data from the parent component.
• Define Output: In the child component, define an output property using the @Output decorator and the EventEmitter class. This property will be used to emit events from the child component to the parent.
• Bind Properties: In the parent component, bind the input property to a variable and subscribe to the output event.
• Call Function: When the parent component needs to call a function in the child, it can set the input property to a value that triggers the child's function.

// ChildComponent
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="childFunction()">Call Child Function</button>
  `
})
export class ChildComponent {
  @Input() inputData: any;
  @Output() childEvent = new EventEmitter();

  childFunction() {
    // Do something
    this.childEvent.emit();
  }
}

// ParentComponent
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [inputData]="parentData" (childEvent)="onChildEvent()"></app-child>
  `
})
export class ParentComponent {
  parentData = 'Some data';

  onChildEvent() {
    // Handle the event from the child
  }
}

Using Angular's Dependency Injection:

• Provide: Register the child component as a service in the parent component's module.
• Inject: Inject the child component into the parent component's constructor.
• Call Function: Access the injected child component instance and call its function.

// ChildComponent
import { Injectable } from '@angular/core';

@Injectable()
export class ChildComponent {
  childFunction() {
    // Do something
  }
}

// ParentComponent
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="callChildFunction()">Call Child Function</button>
  `
})
export class ParentComponent {
  constructor(private childComponent: ChildComponent) {}

  callChildFunction() {
    this.childComponent.childFunction();
  }
}

Understanding the Code Examples

Method 1: Using @ViewChild

Parent Component:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child #child></app-child>
    <button (click)="callChildFunction()">Call Child Function</button>
  `
})
export class ParentComponent {
  @ViewChild('child') childComponent: ChildComponent;

  callChildFunction() {
    this.childComponent.childFunction();
  }
}

• @ViewChild: This decorator is used to get a reference to the child component instance.
• #child: This is a template reference variable that points to the child component element in the template.
• callChildFunction(): This function is called when the button is clicked. It accesses the child component instance using this.childComponent and calls its childFunction() method.

Child Component:

@Component({
  selector: 'app-child',
  template: `
    <button (click)="childFunction()">Call Child Function</button>
  `
})
export class ChildComponent {
  childFunction() {
    console.log('Child function called');
  }
}

• childFunction(): This is the function in the child component that will be called by the parent.

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [inputData]="parentData" (childEvent)="onChildEvent()"></app-child>
  `
})
export class ParentComponent {
  parentData = 'Some data';

  onChildEvent() {
    console.log('Child event received');
  }
}

• [inputData]="parentData": This binds the parentData property of the parent component to the inputData property of the child component.
• (childEvent)="onChildEvent()": This subscribes to the childEvent event emitted by the child component and calls the onChildEvent() function in the parent.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="childFunction()">Call    Child Function</button>
  `
})
export class ChildComponent {
  @Input() inputData: any;
  @Output() childEvent = new EventEmitter();

  childFunction() {
    console.log('Child function called with input:', this.inputData);
    this.childEvent.emit();
  }
}

• @Input() inputData: This defines an input property that can be set by the parent component.
• @Output() childEvent: This defines an output property that can be emitted by the child component to the parent.
• childFunction(): This function logs the input data and emits the childEvent.

Method 3: Using Dependency Injection

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="callChildFunction()">Call Child Function</button>
  `
})
export class ParentComponent {
  constructor(private childComponent: ChildComponent) {}

  callChildFunction() {
    this.childComponent.childFunction();
  }
}

• ChildComponent: The child component must be registered as a service in the module.
• constructor(private childComponent: ChildComponent): The child component is injected into the parent component's constructor.
• callChildFunction(): This function calls the childFunction() method of the injected child component.

import { Injectable } from '@angular/core';

@Injectable()
export class ChildComponent {
  childFunction() {
    console.log('Child function called');
  }
}

• @Injectable(): This decorator marks the child component as a service.

Alternative Methods for Calling Component Functions in Angular 2

While the three primary methods outlined in the previous responses (using @ViewChild, @Input and @Output, and dependency injection) are commonly used, there are a few additional approaches you can consider:

Using ViewContainerRef and ComponentFactoryResolver:

• Create a Component Dynamically: Use ComponentFactoryResolver to create a component factory and ViewContainerRef to insert the component dynamically into the template.
• Access Component Instance: After creation, you can access the component instance and call its functions directly.

Using a Shared Service:

• Create a Service: Create a service that acts as a mediator between components.
• Define Methods: In the service, define methods that can be called by different components.
• Inject Service: Inject the service into both the parent and child components.
• Call Methods: Components can call the service's methods to communicate and invoke functions in each other.

Using Event Emitters with Subject:

• Create a Subject: Use a Subject from rxjs to create a shared observable.
• Subscribe and Emit: Components can subscribe to the subject and emit values to trigger actions in other components.

import { Subject } from 'rxjs';

export class SharedService {
  private subject = new Subject<any>();

  emitEvent(data: any) {
    this.subject.next(data);
  }

  observeEvent() {
    return this.subject.asObservable();
  }
}

Component Usage:

import { Component, OnInit } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-parent',
  template:    `
    <button (click)="emitEvent()">Emit Event</button>
  `
})
export class ParentComponent implements OnInit {
  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.observeEvent().subscribe((data)    => {
      console.log('Event received in Parent:', data);
    });
  }

  emitEvent() {
    this.sharedService.emitEvent('Data from Parent');
  }
}

Using a State Management Solution:

• Implement a Library: Libraries like NgRx or Akita can help manage application state and communication between components.
• Define Actions and Reducers: Create actions and reducers to update the application state.
• Select State: Components can select parts of the state and trigger actions to update it.