Tips for invoking a function from a different component in Angular?

Question

Tips for invoking a function from a different component in Angular?

I'm currently working on implementing a method call from one Angular component to another

Inside one.component.ts, there is a task to verify if it's a day off


  export class CalendarComponent implements OnInit { 
     isDayOfWeekDisabled(dayOfWeek: number): boolean {
       let dateIsDisabled = false;
       const workDay= 
       moment(this.viewDate).startOf('isoWeek').add(dayOfWeek, 'd');
       this.disabledAreas.forEach((item) => {
      if (item.start.isSame(moment(workDay)) && 
      item.end.isSame(moment(workDay.endOf('day')))) {
      dateIsDisabled = true;
  }
});
return dateIsDisabled;

} }

On the other hand, in another.component.ts; if the day off value is true, todos for that day should not be displayed:


       filterDateInDisabledArea(): boolean {
         for (const disabledArea of this.disabledAreas) {
             if (isDayOfWeekDisabled()) {
              return false;
             }
           }
            return true;
         }

However, I am facing challenges in establishing a connection between these components.

angular typescript angular6

Answer 1

Answer №1

To determine the appropriate method for calling from one sibling to another, it is recommended to abstract the method into a shared service that both siblings can access:

Service

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private subject = null;
  data$ = null;

  constructor(private httpClient: HttpClient) {
    this.init();
  }

  init() {
    this.subject = new BehaviorSubject<any>({});
    this.data$ = this.subject.asObservable();
  }

  getProjects(): void {
    const url = 'https://246gg84zg8.execute-api.us-west-2.amazonaws.com/prod/projects/';
    const headers = new HttpHeaders({ 'Content-Type': 'text/plain; charset=utf-8' });
    const options = { headers: headers };
    const value = this.httpClient.get(url, options); // HTTP GET
    this.subject.next(value);
  }
}

Component

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { SharedService } from 'src/app/services/Shared.service';

@Component({
  selector: 'app-shared-component',
  templateUrl: './shared.component.html',
  styleUrls: ['./shared.component.scss']
})
export class SharedComponent implements OnInit {
  projects = null;

  constructor(public sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.getProjects();
    this.sharedService.data$.subscribe(res => {
      if (res.subscribe) {
        res.subscribe(response => {
          this.projects = response.Items.sort(function (a, b) {
            return parseFloat(a.ID) - parseFloat(b.ID);
          });
        }, r => {
          console.log('ERROR', r);
        });
      }
    });
  }
}

Answer 2

To determine the appropriate method for calling from one sibling to another, it is recommended to abstract the method into a shared service that both siblings can access:

Service

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private subject = null;
  data$ = null;

  constructor(private httpClient: HttpClient) {
    this.init();
  }

  init() {
    this.subject = new BehaviorSubject<any>({});
    this.data$ = this.subject.asObservable();
  }

  getProjects(): void {
    const url = 'https://246gg84zg8.execute-api.us-west-2.amazonaws.com/prod/projects/';
    const headers = new HttpHeaders({ 'Content-Type': 'text/plain; charset=utf-8' });
    const options = { headers: headers };
    const value = this.httpClient.get(url, options); // HTTP GET
    this.subject.next(value);
  }
}

Component

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { SharedService } from 'src/app/services/Shared.service';

@Component({
  selector: 'app-shared-component',
  templateUrl: './shared.component.html',
  styleUrls: ['./shared.component.scss']
})
export class SharedComponent implements OnInit {
  projects = null;

  constructor(public sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService.getProjects();
    this.sharedService.data$.subscribe(res => {
      if (res.subscribe) {
        res.subscribe(response => {
          this.projects = response.Items.sort(function (a, b) {
            return parseFloat(a.ID) - parseFloat(b.ID);
          });
        }, r => {
          console.log('ERROR', r);
        });
      }
    });
  }
}

Tips for invoking a function from a different component in Angular?

Answer №1

Similar questions

Testing Angular 4 routing with router.url

Tips for utilizing innerHTML in TypeScript code within an Angular 2 application

What are the methods for utilizing conditional types to verify the format of an array containing multiple objects?

Encountering a Problem with vue-check-view Library in Typescript

Unable to manipulate Bootstrap styles in Angular 7 application

Executing a series of HTTP requests sequentially using Angular 5

The <servicename> is inaccessible within an error function in Angular2

Is there a method to create a typecheck for hasOwnProperty?

Guide on retrieving specific values within an array and mapping them to separate arrays using the HttpClient service in Angular 7+

What is the reason for the HTTP service being activated automatically?

"VS Code's word wrap feature is beneficial for wrapping long lines of text and code, preventing them from breaking and ensuring they are

Executing Functions in ReactJS When Component is Rendered

Numerous issues persist in Angular 6 related to unresolved errors such as crypto, fs, http, https, net, path, stream, tls, and zlib

Guidelines for releasing Node.js microservice client as a stand-alone package within the repository

Utilize React.useImperativeHandle() for declaring custom types

Creating a test scenario for a combineLatest Observable using marbles

The IntrinsicAttributes type does not include the property 'path' in the Preact router

Angular component remains hidden post 'ng build' operation

Transforming text into numbers from JSON response with *ngFor in Angular 6

The ng test option is failing to execute effectively