Access function child component from parent component, angular 4

Question

How can I access a function into child component by event click in parent view.

I have two buttons in my parent view, each one represent a component.

<ul>
  <li><button (click)="buttonOne()">component 1</button></li>
  <li><button (click)="buttonTwo()">component 2</button></li>
</ul>

and I want to click in button component 1 and show the component 1 and when I click in button component 2 hide the component 1 and show the component 2.

child.component

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'component1',
  templateUrl: './componentOne.component.html',
  styleUrls: ['./componentOne.component.less']
})
export class ComponentOne implements OnInit {
  showComponent: boolean = false;

  constructor() {}
  buttonOne(): boolean {
    this.showComponent = true;
  }
  buttonTwo(): boolean {
    this.showComponent = false;
  }

  ngOnInit() {}
}

parent.component

import { Component, OnInit } from '@angular/core';
import { ComponentOne } from '...parent-component/component-one.component';

@Component({
  selector: 'parent-component',
  templateUrl: 'parent-component.component.html',
  styleUrls: ['parent-component.component.less']
})
export class ParentComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

  ngOnDestroy() {
  }
}

For this you don't need child parent component, you can place them and enable/disable based on ngIf — Sajeetharan
– Sajeetharan, Commented Jan 4, 2018 at 15:49
component one will be a chart and component two as well... I will put in parent only the header and buttons. What about? thank you. — deleting
– deleting, Commented Jan 4, 2018 at 15:51
still you dont need a parent child component, have one component to display both and enable disable accordingly — Sajeetharan
– Sajeetharan, Commented Jan 4, 2018 at 15:52

axl-code · Accepted Answer · 2018-01-04 15:53:21Z

1

The code for displaying the child component should be in the parent, it could be something like this:

Parent component:

import { Component, OnInit } from '@angular/core';
import { ComponentOne } from '...parent-component/component-one.component';

@Component({
  selector: 'parent-component',
  templateUrl: 'parent-component.component.html',
  styleUrls: ['parent-component.component.less']
})
export class ParentComponent implements OnInit {

  constructor() {}

  buttonOne(): boolean {
    this.showComponentOne = true;
  }

  buttonTwo(): boolean {
    this.showComponentTwo = true;
  }

  ngOnInit() {
  }

  ngOnDestroy() {
  }

}

Parent component HTML:

<ul>
  <li><button (click)="buttonOne()">component 1</button></li>
  <li><button (click)="buttonTwo()">component 2</button></li>
</ul>
<component-one *ngIf="showComponentOne"></component-one>
<component-two *ngIf="showComponentTwo"></component-two>

answered Jan 4, 2018 at 15:53

axl-code

2,3241 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deleting Over a year ago

Is possible, change the route when I change the componente, component 1 = url/component-1 and component 2 = url/component-2

user4676340 · Accepted Answer · 2018-01-04 15:52:13Z

I don't know how you create your components, but how I learnt it is

<ul>
  <li><component1>component 1</component1></li>
  <li><component2>component 2</component2></li>
</ul>

Given that, you should add local variables to your component HTML, like so :

<ul>
  <li><component1 #comp1>component 1</component1></li>
  <li><component2 #comp2>component 2</component2></li>
</ul>

By doing so, you allow Angular to get a child reference, that you can get in your TS with

@ViewChild(Component1Component): comp1: Component1Component;    
@ViewChild(Component2Component): comp2: Component2Component;

Which then, allows you to do

this.comp1.myFunctionToCall();
this.comp2.myFunctionToCall();

Or, in your HTML, you can just use the local variable like so

<ul>
  <li><component1 #comp1 (click)="comp1.myFunctionToCall()">component 1</component1></li>
  <li><component2 #comp2 (click)="comp2.myFunctionToCall()">component 2</component2></li>
</ul>

Collectives™ on Stack Overflow

Access function child component from parent component, angular 4

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related