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
Post a Comment