I am in need of running the functions of the grandparent component:
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;
}
}
using this grandchild component as a medium:
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**
}
}
I found an example using a DataService like this one to achieve something similar:
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)
}
}
However, I do not want to pass any message, but simply execute a function. Is it necessary to create a DataService for this purpose? Can't I directly implement an Observable or something similar in the grandparent component? If so, could someone please provide an example?