Angular 6 | How to invoke function in child component from parent component?

Question

I'm new with the Angular and I'm already stock at the invoking function from another component.

My structure is:

Header compomnent

where is folder with sidebar component

So in sidebar I have this code, wher you can see button with function sideBar.toggle which is working from that place however I'm trying to move out button to the header where actually should be:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

.container {
    width: 100%;
    height:auto;
  }

  .sidenav {
    width: 300px;
  }

<mat-drawer-container class="container" autosize>
    <mat-drawer #sideBar class="sidenav" mode="over">
      <p>Auto-resizing sidenav</p>
      <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
      <button (click)="showFiller = !showFiller" mat-raised-button>
        Toggle extra text
      </button>
    </mat-drawer>
  
    <div class="example-sidenav-content">
      <app-google-map></app-google-map>
    </div>
    <button type="button" mat-button (click)="sideBar.toggle()">
        Toggle sidenav
      </button>
  </mat-drawer-container>

But when I'm trying call button from Header component, it does not work

Here is code:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  Name = 'Menuckaren';
  Navigation = 'Navigácia';
  icons = ['color_lens', 'favorite'];

  constructor() { }

  ngOnInit() {
  }

}

.example-icon {
    padding: 0 14px;
  }
  
  .example-spacer {
    flex: 1 1 auto;
  }

  .navigation {
    -webkit-box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
    -moz-box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
    box-shadow: inset 0px 13px 19px -2px rgba(0,0,0,0.43);
  }

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span>{{Name}}</span>
    <span class="example-spacer"></span>
    <button *ngFor="let icon of icons" mat-icon-button>
      <mat-icon>{{icon}}</mat-icon>
    </button>
  </mat-toolbar-row>

  <mat-toolbar-row class="navigation">
    <button mat-raised-button color="primary" (click)="sideBar.toggle()">{{Navigation}}</button>
    <span class="example-spacer"></span>
  </mat-toolbar-row>
</mat-toolbar>

I don't understand what you are trying to achieve, therefore I can only give the official documentation for [component interaction](https://angular.io/guide/component-interaction) — Ploppy, Aug 26 '18 at 11:51
take a look at this https://stackoverflow.com/questions/48073057/angular-open-close-sidenav-from-another-component/48076331#48076331 — Eldho, Aug 26 '18 at 12:51

score 0 · Accepted Answer · answered Aug 26 '18 at 15:17

0

use eventemitter. And try grasp the idea of using @output and @input fields/properties https://angular.io/api/core/EventEmitter

answered Aug 26 '18 at 15:17

Gani Lastra

245
1
14

score 0 · Answer 2 · answered Aug 30 '18 at 21:57

This is the expected behavior. The toggle() function is working in sidebar component because you have #sideBar reference tagged for mat-drawer. But I can't see there is any sidebar reference in your app-header component.

I would suggest you read the official documentation for components interaction guide as suggested by @Ploppy. Then you'll realize there are many ways to achieve what you want.

Angular 6 | How to invoke function in child component from parent component?

2 Answers2