I have two different component - one component has click event method for the list users & I want to inherit(invoke) that click event method on detail page(another component) )
How to do that, Please help me...
ANSWER UPDATE
Thanks For your Answers.
I have got the solution by Using extend Class & using super() in constructor.
First Class
export class TeamsView {
constructor(private test:TestService){
}
...
}
Second Class
export class TeamsForm extends TeamsView {
constructor(private test:TestService, private router: Router){
super(test)
}
...
}
1. Invoking method from one component to another component (if they are not parent and child), can only be possible using services.
//FirstComponent
import {Component} from '@angular/core';
import {CommonService} from './common.service';
@Component({
selector: '<first-component></first-component>',
template: 'some html here',
providers: [CommonService]
})
export class FirstComponent {
constructor(private _service: CommonService) {
this._service.callMethodOfSecondComponent();
}
}
//CommonService
import {Subject} from 'rxjs/Subject';
@Injectable()
export class CommonService {
invokeEvent: Subject<any> = new Subject();
callMethodOfSecondComponent() {
this.invokeEvent.next(someValue)
}
}
//SecondComponent
import {Component, OnInit} from '@angular/core';
import {CommonService} from './common.service';
@Component({
selector: '<second-component></second-component>',
template: 'some html here',
providers: [CommonService]
})
export class SecondComponent {
constructor(private _service: CommonService) {
this._service.invokeEvent.subscribe(value => {
if(value === 'someVal'){
this.callMyMethod();
}
});
}
callMyMethod(){
//code block to run
}
}
2. Invoking method of parent component from child component
//Child Component
import {Component} from '@angular/core';
@Component({
selector: '<child-component></child-component>',
template: 'some html here',
})
export class ChildComponent {
@Output()
emitFunctionOfParent: EventEmitter<any> = new EventEmitter<any>();
constructor() {
}
someMethodOfChildComponent(){
this.emitFunctionOfParent.emit(someValue);
}
}
//ParentComponent
import {Component} from '@angular/core';
@Component({
selector: '<parent-component></parent-component>',
template: `some html
<child-component
(emitFunctionOfParent)="myMethod($event)">
</child-component>
some html
`,
})
export class ParentComponent {
constructor() {
}
myMethod(someValue){
// i am called
}
}
3. Invoking method of child component from parent component
//Child Component
import {Component} from '@angular/core';
@Component({
selector: '<child-component></child-component>',
template: 'some html here',
})
export class ChildComponent {
constructor() {
}
someMethodOfChildComponentToBeCalled(){
// i am called
}
}
//Parent Component
import {Component, OnInit} from '@angular/core';
import {ChildComponent} from './child.component';
@Component({
selector: '<parent-component></parent-component>',
template: `some html
<child-component>
</child-component>
some html
`
})
export class ParentComponent implements OnInit {
@ViewChild(ChildComponent) private _child:
ChildComponent;
ngOnInit() {
this._child.someMethodOfChildComponentToBeCalled();
}
}
There might be other ways for communication as well except these ones. :)