Accessing a property in a parent Component

Question

I have a property in a top level Component that is used data from a HTTP source like so  this is in a file called app ts    import  UserData  from    services user-data UserData    Component       selector   app       lt app gt  lt  app gt      providers      FORM PROVIDERS       directives      ROUTER DIRECTIVES       pipes          template  require    app html       RouteConfig          stuff here     export class App          Please note that UserData is an Injectable Service I have written     userStatus  UserStatus       constructor private userData  UserData            this userStatus   new UserStatus               ngOnInit             this userData getUserStatus                subscribe               status    gt                    this userStatus   status     I want to access this in my Child Components                                err    gt   console log err                      gt   console log  User status complete                                      Now  I have another Component that is a direct child of the top level Component and within it I would like to access the parent s property  userStatus   here is the child   Component       selector   profile       template  require  app components profile profile html        providers          directives          pipes         export class Profile implements OnInit       constructor                 ngOnInit                I want to have access with the parent App Component   userStatus  propety here    I only want to read this property           Now in Angular 1 x this would be easy as I could reference  parent in my child controller or  ANTI PATTERN ALERT     I could be so foolish to put this data in my  rootScope   What would be the best way to access the parent in Angular 2

User · Answer

I had the same problem but I solved it differently. I don't know if it's a good way of doing it, but it works great for what I need.

I used @Inject on the constructor of the child component, like this:

import { Component, OnInit, Inject } from '@angular/core';
import { ParentComponent } from '../views/parent/parent.component';

export class ChildComponent{
    constructor(@Inject(ParentComponent) private parent: ParentComponent){

    }

    someMethod(){
        this.parent.aPublicProperty = 2;
    }
}

This worked for me, you only need to declare the method or property you want to call as public.

In my case, the AppComponent handles the routing, and I'm using badges in the menu items to alert the user that new unread messages are available. So everytime a user reads a message, I want that counter to refresh, so I call the refresh method so that the number at the menu nav gets updated with the new value. This is probably not the best way but I like it for its simplicity.

User · Answer

I made a generic component where I need a reference to the parent using it  Here s what I came up with   In my component I made an  Input     Input   parent  any    Then In the parent using this component    lt app-super-component  parent   this  gt   lt  app-super-component gt    In the super component I can use any public thing coming from the parent   Attributes   parent anyAttribute   Functions    parent myFunction  anyParameter    and of course private stuff won t be accessible

User · Answer

Since the parent-child interaction is not an easy task to do  But by having a reference for the parent component in the child component it would be much easier to interact  In my method  you need to first pass a reference of the parent component by calling the function of the child component  Here is the for this method   The Code For Child Component       import   Component  Input ElementRef Renderer2   from   angular core        import   ParentComponent   from    parent component         Component         selector   qb-child         template    lt div class  child  gt  lt button  click   parentClickFun    gt Show text Of Parent Element lt  button gt  lt button  click   childClickFun    gt Show text Of Child Element lt  button gt  lt ng-content gt  lt  ng-content gt  lt  div gt          styleUrls      app component css              export class ChildComponent          constructor private el  ElementRef private rend  Renderer2                    qbParent ParentComponent         getParent parentEl  void          this qbParent parentEl          console log this el nativeElement innerText                  Input   name  string        childClickFun   void          console log  Properties of Child Component is Accessed                   parentClickFun   void          this qbParent callFun                    This is Code for parent Component  import   Component  Input   AfterViewInit ContentChild ElementRef Renderer2  from   angular core    import   ChildComponent   from    child component     Component     selector   qb-parent     template    lt div class  parent  gt  lt ng-content gt  lt  ng-content gt  lt  div gt      styleUrls      app component css      export class ParentComponent implements AfterViewInit     constructor private el  ElementRef private rend  Renderer2            Input   name  string     ContentChild ChildComponent  read ChildComponent static true   qbChild ChildComponent     ngAfterViewInit   void      this qbChild getParent this          callFun   void      console log  Properties of Parent Component is Accessed             The Html Code   lt qb-parent gt    This is Parent    lt qb-child gt      This is Child    lt  qb-child gt   lt  qb-parent gt    Here we pass the parent component by calling a function of the child component  The link below is an example of this method  Click here

User · Answer

You could    Define a userStatus parameter for the child component and provide the value when using this component from the parent    Component              export class Profile implements OnInit      Input     userStatus UserStatus               and in the parent    lt profile  userStatus   userStatus  gt  lt  profile gt   Inject the parent into the child component    Component              export class Profile implements OnInit     constructor app App        this userStatus   app userStatus                   Be careful about cyclic dependencies between them

User · Answer

There are different way    global service   see also https   github com escardin angular2-community-faq blob master services md how-do-i-communicate-between-components-using-a-shared-service Global Events in Angular 2 Plunker  service shared by parent and injected to the child   similar to global service but listed in providers or viewProviders in the parent instead of boostrap      and only available to children of parent   parent injected to the child and accessed directly by the child   disadvantage  tight coupling      export class Profile implements OnInit   constructor  Host   parent  App      parent userStatus          data-binding     export class Profile implements OnInit      Input   userStatus UserStatus            lt profile  userStatus   userStatus  gt

User · Answer

On Angular 6  I access parent properties by injecting the parent via constructor  Not the best solution but it works    constructor  Optional   public parentComponentInjectionObject  ParentComponent          And access like this      parentComponentInjectionObject thePropertyYouWantToAccess

[typescript] Accessing a property in a parent Component

Examples related to typescript

Examples related to angular