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

Exploring the syntax of typescript when using createContext

Having trouble with enzyme in React Typescript application

Offset the CDK Menu

React Typescript Context state isn't refreshing properly

TypeScript - Issue with generic function's return type

AGM MAP | Placing marker within a custom polygon created on the map

Utilize [markdown links](https://www.markdownguide.org/basic-syntax/#

Guide on formatting the API response using a callback function in Angular development

Update a specific form data field within an Angular application

Angular does not display a loading indicator in the header

Tips for managing a group of checkboxes in Angular 2 RC5

SharePoint Online / Angular - Issue: Unhandled Error: Zone is already loaded

Attempting to integrate Bootstrap 5 accordion into Angular 17 using ngFor has posed a challenge for me

Leverage Angular, NodeJS, and Sequelize to extract data from HTML tables

Obtain the Enum's Name in TypeScript as a String

Cypress eliminating the "X-CSRFToken" header

unable to retrieve information from the redis cache

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

Is it possible to showcase a unique date for every item that gets added to a list?

The browser is sending numerous requests for the audio tag