How to trigger a click event function of another component in angularjs4

Question

In my angularjs project, I am facing an issue with click from the html. My code module is as follows I have a header module and an auth module

import { Component } from '@angular/core';

@Component({
selector: 'layout-header',
templateUrl: './header.component.html'
})
export class HeaderComponent {
constructor() {}

}

In header.component.html I have added a click event, my intention is to call a function from other component click code is as follow

<ul>
  <li class="nav-item"><a class="nav-link" (click)="clickLogout($event)" routerLinkActive="active"> Logout </a> </li>
</ul>

"clickLogout" function is added on other component any if does'nt calling up If I add the same "clickLogout" in header.component.ts, it works.

But for some reason I need it on another component, So is there any option to trigger click of other component from view : (click)="clickLogout($event)"

I am using angularjs4, Somebody please advice!

Directory structure is as follows

app 
--auth 
----auth-logout.component.ts 
--shared 
----layout 
-------header.component.ts 
-------header.component.html

I need the click call on auth-logout.component.ts

from which component you want to call it ? Is there any parent child relationship with those 2 controllers? or are they just siblings ? — user1608841
– user1608841, Commented Sep 20, 2017 at 10:36
No parent child relation, just a sibling. I need click from header component template to call another component function which has no relation with header component — Ajith
– Ajith, Commented Sep 20, 2017 at 10:37

user1608841 · Accepted Answer · 2017-09-20 12:04:31Z

3

You Need a shared service to do so :

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MessageService {
    private subject = new Subject<any>();

    logout() {
        this.subject.next({ text: 'logout'});
    }

    getMessage(): Observable<any> {
       return this.subject.asObservable();
    }

}

and in header component :

import { Component } from '@angular/core';
import { MessageService} from 'service/MessageService'; //import service here as per your directory
@Component({
    selector: 'layout-header',
    templateUrl: './header.component.html'
})
export class HeaderComponent {
   constructor(private messageService: MessageService) {}
    clickLogout(): void {
    // send message to subscribers via observable subject
    this.messageService.logout();
  }
}

And in any other component EDIT:

import { Component } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'; //Edit
import { MessageService} from 'service/MessageService'; //import service here as per your directory
@Component({
        selector: 'another-component',
        templateUrl: './another.component.html'
    })
    export class AnotherComponent {
       constructor(private messageService: MessageService) {
    // subscribe to home component messages
            this.messageService.getMessage().subscribe(message => { 
               //do your logout stuff here
          });
        }

      ngOnDestroy() {
         // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
      }

    }

Reference taken from here.

edited Sep 20, 2017 at 12:04

answered Sep 20, 2017 at 11:00

user1608841

2,4751 gold badge29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Ajith Over a year ago

When I click logoutbutton clickLogout() in header component called up successfully => then logout function of MessageService called up successfully => but finally this.logoutService.getMessage().subscribe(message => { }); in AnotherComponent didnt called up

user1608841 Over a year ago

add console.log inside subscribe... does it printed the something ? actually once logout method get fired; subscribe method will automatically get called.

user1608841 Over a year ago

I am assuming another component will be in view correct ?

user1608841 Over a year ago

have u imported logout service in another component ? any error on console ?

Ajith Over a year ago

click is from header component template, another component doest have any view and console.log inside subscribe... doesnt print

|

Collectives™ on Stack Overflow

How to trigger a click event function of another component in angularjs4

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related