title: angular 6 execute grandparent functions from grandchild
body: <p>I need to execute this grandparent component functions:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
    public loginPage = true;
  
    public login = function(){
      this.loginPage = false;
    }
    public logout = function(){
      this.loginPage = true;
    }
  
  }
  </code></pre>
  
  <p>from this grandchild component:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-dropmenu',
    templateUrl: './dropmenu.component.html',
    styleUrls: ['./dropmenu.component.css']
  })
  export class DropmenuComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
    logout(){
      sessionStorage.removeItem('token');
      **//EXECUTE LOGOUT() GRANDPARENT FUNCTION HERE**
    }
  }
  </code></pre>
  
  <p>The closer example that I found to what I want was to create a DataService like this one:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable()
  export class DataService {
  
    private messageSource = new BehaviorSubject('default message');
    currentMessage = this.messageSource.asObservable();
  
    constructor() { }
  
    changeMessage(message: string) {
      this.messageSource.next(message)
    }
  
  }
  </code></pre>
  
  <p>and then in the components do:</p>
  
  <pre><code>message: string;
  this.data.currentMessage.subscribe(message =&gt; this.message = message)
  //AND
  this.data.changeMessage("Hello from Sibling")
  </code></pre>
  
  <p>But I don't want to pass any message, I just want to execute a function so do I really need to create that DataService? Can't I just make an Observable or something directly in the grandparent component?
  If so, can someone show me an example please?</p>