javascript - Angular - Calling another components function to toggle a div's display -


i have 2 components, 1 header , 1 plain text @ moment.

on header there menu pick options. when 1 of options clicked on header, want toggle boolean in other component , display entire html.

how can onclick() in header menu?

console says function i'm trying call undefined.

//this in 1 folder...  export class educationcomponent {   showeducation: boolean = true;   toggleeducation () {  this.showeducation = !this.showeducation;   } } 

 

//this is different folder...  <li><a (click)="toggleeducation()">education</a></li> 

the purpose of component class provide properties , methods needed component's template. template associated class find properties , methods.

if need share properties or methods across several components, use angular service instead.

i have blog post angular services here: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

the code looks this:

import { injectable } '@angular/core';  @injectable()  export class dataservice {   servicedata: string;  } 

in case, servicedata boolean instead of string.

one component set value , other can bind it.

i have code in plunker if want try out: https://plnkr.co/edit/kt4jlmpcwgbm2xdzqei9?p=preview


Comments

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

php - How can i create a user dashboard -

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -