CODEWITHSUNDEEP
angulartypescript
user1814879
user1814879

Reputation: 984

Calling method of a component Angular 2/4

I tried to use a method of a component in an other but I get error like No provider for xxComponent . How can I do it ?

import { FoldersService } from '../../_services/folders.service';
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-folder-create',
  templateUrl: './folder-create.component.html',
})
export class FolderCreateComponent implements OnInit {
   constructor(
    private http: Http,
    private folderService: FoldersService,
  ) { }

  ngOnInit() { }

  saveFolder() {

  }
}

-- Class FolderEditComponent 
   import { FolderCreateComponent } from '../folder-create/folder-create.component';
@Component({
  selector: 'app-folder-edit',
  templateUrl: './folder-edit.component.html',
  styleUrls: ['./folder-edit.component.css'],
})
export class FolderEditComponent implements OnInit {
   constructor(
    private http: Http,
    private folderService: FoldersService,
    private folderCreate: FolderCreateComponent
  ) { }

  ngOnInit() { }

  // How can I do here for calling method saveFolder() of the component FolderCreateComponent

  // I try this :
  folderCreate.saveFolder(); // But I got error : ERROR Error: Uncaught (in promise): Error: No provider for FolderCreateComponent!

}

How can I do for calling method saveFolder() of the component FolderCreateComponent in the component FolderEditComponent ?

Upvotes: 2

Views: 538

Answers (3)

Rahul Singh
Rahul Singh

Reputation: 341

case 1 - when you want to access method of child component, then in parent component - 

@ViewChild(ChildComponent) childComponent: ChildComponent;

childComponent.methodName();

case 2 - when you want access parent method from child -

constructor(@Inject(forwardRef(() => ParentComponent)) private _parent: ParentComponent){}

just use this._parent.methodName()

Upvotes: 2

pzaenger
pzaenger

Reputation: 11973

You need to add your service to the used providers within your component:

@Component({
  selector: 'app-folder-create',
  templateUrl: './folder-create.component.html',
  providers: [FoldersService]
})

In addition you also need to import the component with import {FooComponent} from '/path/to/foo.component'; in order to use a component inside another one.

Edit:

import {FolderCreateComponent} from 'path/to/component';

export class FolderEditComponent implements OnInit {

   constructor(private folderCreate: FolderCreateComponent) {
   }

   foo() { this.folderCreate.saveFolder(); }
}

Upvotes: 1

Nilesh Khisadiya
Nilesh Khisadiya

Reputation: 1658

Add Providers as shown below for FolderCreateComponent

import { FoldersService } from '../../_services/folders.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
  selector: 'app-folder-create',
  templateUrl: './folder-create.component.html',
  providers: [FoldersService]
})
export class FolderCreateComponent implements OnInit {
   constructor(
    private http: Http,
    private folderService: FoldersService,
  ) { }

  ngOnInit() { }

  saveFolder() {

  }
}

Upvotes: 1

Related Questions