Can we can access all methods from one component to another

Question

I have two components, Among those two, one component is acting as a provider. how we can access all methods from component A to its provider.

import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NewParcelModal } from './new-parcel-modal';

@Component({
  selector: 'app-add-new-parcels',
  templateUrl: './add-new-parcels.component.html',
  styleUrls: ['./add-new-parcels.component.scss'],
  providers: [NewParcelModal, MomentDateFormatter]
})
export class AddNewParcelsComponent implements OnInit {
 
  ngOnInit() {
    this.getWindowsProperties();
    this.createControls();
    this.addNewParcelForm.patchValue(this.modalInfo);
    this.getNoticeTypeList();
  }
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.getWindowsProperties();
  }
 
  createControls() {
    this.addNewParcelForm = this.formBuilder.group(this.newParcelModal.parcelInfo)
  }
  getSurveyTypes() {
    return { test: 'test' };
  }
}

Provider component

import { Injectable } from "@angular/core";
import { bind } from "@angular/core/src/render3";
import { FormControl, Validators } from "@angular/forms";
import { DISABLED } from "@angular/forms/src/model";
import { CONSTANTS } from "src/app/common/constants";

@Injectable()
export class NewParcelModal {
    constructor() { }
    parcelInfo = {       
        royaltyrate: new FormControl(null),
        percentinterest: new FormControl(null)    
        };

}

I am using NewParcelModal as provider in the component AddNewParcelsComponent

Problem: Not able to aceess getSurveyTypes method from AddNewParcelsComponent in the NewParcelModal component.

check out this may be help you : https://stackoverflow.com/questions/37587732/how-to-call-another-components-function-in-angular2 — Harshad Pansuriya, Jun 29 '21 at 12:17
Typically, one shares functionality between components via services, not by making a component a provider. [Angular's documentation on providers has all of the examples using services or plain objects and classes](https://angular.io/guide/dependency-injection-providers#dependency-providers). You can have one component be a parent of another component, you can have inheritance between components (although this is discouraged), but I've never head of using a component as a provider. — Heretic Monkey, Jun 29 '21 at 12:23
Angular is not react, you don't need to use components to share data/call functions. Use functions, state, or input/output and tree structure of the components. Services are recommended though — akkonrad, Jun 29 '21 at 12:31
using service fulfilled my requirement. @HereticMonkey Thanks for detailed info — Sarjerao Ghadage, Jun 29 '21 at 14:51

Shruti Bhagwate · Answer 1 · 2021-06-29T14:08:20.663

1

You can use services for sharing functions/data in between multiple components. Please refer https://angular.io/tutorial/toh-pt4 this documentation for further details.

edited Jun 29 '21 at 14:08

answered Jun 29 '21 at 13:39

Shruti Bhagwate

99
4

Can we can access all methods from one component to another

1 Answers1