How to call a method from another component in Angular?

Question

I'm trying to call a mehtod from one Angular component to another

This is one.component.ts , it has to check 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;

} }

and another.component.ts ; if day off = true, it doesn't show todos for that day:

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

but I can't understand how to create a connection between these components.

Answer 1

It depends, if you are calling from sibling to sibling then you would abstract the method to a service that both will use:

Service

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

@Injectable({
  providedIn: 'root'
})
export class MruanovaService {
  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 { MruanovaService } from 'src/app/services/Mruanova.service';

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

  constructor(public MruanovaService: MruanovaService) {}

  ngOnInit() {
    this.MruanovaService.getProjects();
    this.MruanovaService.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);
        });
      }
    });
  }
}