Angular - Executing a function in one component from another

Question

Angular - Executing a function in one component from another

Within my Angular-12 application, I have implemented two components: employee-detail and employee-edit.

In the employee-detail.component.ts file:

profileTemplate: boolean = false;
contactTemplate: boolean = false;

profileFunction() {
  this.profileTemplate = true;
  this.contactTemplate = false;
}

contactFunction() {
  this.profileTemplate = false;
  this.contactTemplate = true;
}

The corresponding employee-detail.component.html contains:

<div class="card-body">
  <div id="external-events">
    <button (click)="profileFunction()" type="button" class="btn btn-block btn-primary">Profile</button>
    <button (click)="contactFunction()" type="button" class="btn btn-block btn-success">Contact</button>
  </div>
</div>

<div *ngIf="profileTemplate" class="card card-default color-palette-box">

</div>

<div *ngIf="contactTemplate" class="card card-default color-palette-box">

</div>

By clicking on the buttons, either the profile or contact section is displayed based on the function triggered.

Now onto another component, which is employee-edit:

Within employee-edit.component.ts:

onSubmitProfile() {
  this.router.navigate(['/employees-detail', this._id]);
}

onSubmitContact() {
  this.router.navigate(['/employees-detail', this._id]);
}

I aim to achieve a functionality where upon calling onSubmitProfile(), it triggers profileFunction() causing the

<div *ngIf="profileTemplate" class="card card-default color-palette-box">

to become visible. Similarly, if onSubmitContact() is executed, it should render

<div *ngIf="contactTemplate" class="card card-default color-palette-box">

How can I implement this seamlessly?

Thank you

angular typescript angular12

Answer 1

Answer №1

Solution 1: Angular Data Sharing Service

1.1 Include the event (contact or profile) within the fragment using NavigationExtras.

employee-edit.component.ts

export class EmployeeEditComponent implements OnInit {

  onSubmitProfile() {
    this.router.navigate(['/employees-detail', this._id], {
      fragment: 'contact'
    });
  }

  onSubmitContact() {
    this.router.navigate(['/employees-detail', this._id], {
      fragment: 'contact'
    });
  }
}

1.2 Extract the fragment from activatedRoute and perform actions based on the retrieved fragment.

employee-detail.component.ts

import { ActivatedRoute, Router } from '@angular/router';

export class EmployeeDetailComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.fragment.subscribe(fragment => {
      if (fragment == 'profile') this.profileFunction();
      else if (fragment == 'contact') this.contactFunction();
    });
  }
}

See Sample Solution 1 in StackBlitz

Advantage: Simplifies content manipulation with fragment #event.

Disadvantage: The URL displays the implemented fragment #event.

Solution 2: Create Basic Angular Data Sharing Service

2.1 Develop EmployeeEventService including getter and setter methods for event$.

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmployeeEventService {
  private event$: BehaviorSubject<
    keyof typeof EVENT | null
  > = new BehaviorSubject(null as keyof typeof EVENT | null);

  setEvent(event: keyof typeof EVENT) {
    this.event$.next(event);
  }

  getEvent() {
    return this.event$.asObservable();
  }
}

export enum EVENT {
  contact,
  profile
}

2.2 Inject EmployeeEventService and set the event using setEvent().

import { EmployeeEventService } from '../employee-event.service';

export class EmployeeEditComponent implements OnInit {
  constructor(
    public employeeEventService: EmployeeEventService
  ) {}

  onSubmitProfile() {
    this.employeeEventService.setEvent('profile');
    this.router.navigate(['/employees-detail', this._id]);
  }

  onSubmitContact() {
    this.employeeEventService.setEvent('contact');
    this.router.navigate(['/employees-detail', this._id]);
  }
}

2.3 Inject EmployeeEventService and obtain event$ Observable through getEvent().

import { EmployeeEventService } from '../employee-event.service';

export class EmployeeDetailComponent implements OnInit {
  constructor(
    public employeeEventService: EmployeeEventService
  ) {}

  ngOnInit() {
    this.employeeEventService.getEvent().subscribe(event => {
      if (event == 'profile') this.profileFunction();
      else if (event == 'contact') this.contactFunction();
    });
  }
}

View Sample Solution 2 in StackBlitz

Advantage: Manages event via service (addresses Solution 1's disadvantage).

Disadvantage: More complex implementation compared to Solution 1.

Answer 2

Solution 1: Angular Data Sharing Service

1.1 Include the event (contact or profile) within the fragment using NavigationExtras.

employee-edit.component.ts

export class EmployeeEditComponent implements OnInit {

  onSubmitProfile() {
    this.router.navigate(['/employees-detail', this._id], {
      fragment: 'contact'
    });
  }

  onSubmitContact() {
    this.router.navigate(['/employees-detail', this._id], {
      fragment: 'contact'
    });
  }
}

1.2 Extract the fragment from activatedRoute and perform actions based on the retrieved fragment.

employee-detail.component.ts

import { ActivatedRoute, Router } from '@angular/router';

export class EmployeeDetailComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.fragment.subscribe(fragment => {
      if (fragment == 'profile') this.profileFunction();
      else if (fragment == 'contact') this.contactFunction();
    });
  }
}

See Sample Solution 1 in StackBlitz

Advantage: Simplifies content manipulation with fragment #event.

Disadvantage: The URL displays the implemented fragment #event.

Solution 2: Create Basic Angular Data Sharing Service

2.1 Develop EmployeeEventService including getter and setter methods for event$.

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmployeeEventService {
  private event$: BehaviorSubject<
    keyof typeof EVENT | null
  > = new BehaviorSubject(null as keyof typeof EVENT | null);

  setEvent(event: keyof typeof EVENT) {
    this.event$.next(event);
  }

  getEvent() {
    return this.event$.asObservable();
  }
}

export enum EVENT {
  contact,
  profile
}

2.2 Inject EmployeeEventService and set the event using setEvent().

import { EmployeeEventService } from '../employee-event.service';

export class EmployeeEditComponent implements OnInit {
  constructor(
    public employeeEventService: EmployeeEventService
  ) {}

  onSubmitProfile() {
    this.employeeEventService.setEvent('profile');
    this.router.navigate(['/employees-detail', this._id]);
  }

  onSubmitContact() {
    this.employeeEventService.setEvent('contact');
    this.router.navigate(['/employees-detail', this._id]);
  }
}

2.3 Inject EmployeeEventService and obtain event$ Observable through getEvent().

import { EmployeeEventService } from '../employee-event.service';

export class EmployeeDetailComponent implements OnInit {
  constructor(
    public employeeEventService: EmployeeEventService
  ) {}

  ngOnInit() {
    this.employeeEventService.getEvent().subscribe(event => {
      if (event == 'profile') this.profileFunction();
      else if (event == 'contact') this.contactFunction();
    });
  }
}

View Sample Solution 2 in StackBlitz

Advantage: Manages event via service (addresses Solution 1's disadvantage).

Disadvantage: More complex implementation compared to Solution 1.

Angular - Executing a function in one component from another

Answer №1

Solution 1: Angular Data Sharing Service

Solution 2: Create Basic Angular Data Sharing Service

Similar questions

Tips on pre-filling a form using ngModel bindings

Discovering the JavaScript source file for a package using WebStorm and TypeScript

Tips for getting Atom cucumber step jump package to function properly on a Windows operating system

Is the variable empty outside of the subscribe block after it's been assigned?

Angular: Converting this code into a loop - A step-by-step guide

Encountering an issue with Angular 12 where a TypeError is being thrown, specifically stating "Cannot read properties of null (reading 'length') at

Swapping out 'useResult' in graphql for Vue and Apollo: A step-by-step guide

Implement the CSS styles from the Parent Component into the Child Component using Angular 6

Angular - Automatically filling in an empty input field upon dropdown selection

Issues with the linear-gradient feature in Ionic3 are preventing it from properly functioning

The initial character of the input must always be a letter

The function '() => Promise<T>' cannot be assigned to type 'Promise<T>'

Angular Component - Array missing initial value in @Input property

Attempting to transform calc application into TypeScript, what data type should this function be?

Setting up Typescript classes that inherit from one another with diverse properties for each subclass

The process of releasing a component created with angular-starter onto npm is now underway

Placing a MongoDB query results in an increase of roughly 120MB in the total JS heap size

Creating a standard arrow function in React using TypeScript: A Step-by-Step Guide

Troubleshooting Problem in Angular 6: Difficulty in presenting data using *ngFor directive (data remains invisible)

Guide on implementing ng-if in an Ionic 2 HTML template