angular - call function from different typescript file

I am facing issue whiling calling a function/method from another typescript file. I have read through many articles and found using service it can be done easily so here I am with my code but it is not working. It is not throwing any error but not giving any results too.

trigger.html

<button (click) = "openToast();" type="button" class="btn btn-primary btn-block">
Open Toast
</button>


trigger.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';

@Component({
selector: 'app-trigger',
templateUrl: './trigger.component.html',
styleUrls: ['./trigger.component.scss'],
providers: [MessageService]
})
export class TriggerComponent implements OnInit {

constructor(private _messageService: MessageService) { }

ngOnInit() {
}

openToast(){
this._messageService.callToastr();
}

}


message.service

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

@Injectable({
providedIn: 'root'
})
export class MessageService {
invokeEvent = new Subject<any>();

listen(): Observable<any> {
return this.invokeEvent.asObservable();
}

callToastr(){
this.invokeEvent.next('Y');
}
constructor() { }
}


home.ts

import { MessageService } from '../message.service';

const types = ['success', 'error', 'info', 'warning'];

@Component({
templateUrl: './home.component.html',
providers: [MessageService]
})
export class HomeComponent {

constructor(public toastr: ToastrService, private renderer: Renderer2, public _dataService: DataService,
public _messageService: MessageService) {
this.options = this.toastr.toastrConfig;
this._messageService.listen()
.subscribe( value => {
if (value === 'Y') {
this.openToast();
}
})
}

openToast() {
const { message, title } = this.getMessage();
// Clone current config so it doesn't change when ngModel updates
const opt = cloneDeep(this.options);
const inserted = this.toastr.show(
message,
title,
opt,
this.options.iconClasses[this.type],
);
if (inserted) {
this.lastInserted.push(inserted.toastId);
}
return inserted;
}
}


I have tried it by many ways but failed everytime. Can anyone please help in finding the root cause? Thanks in advance!

With what error does it fail?
– AD8
Jun 26 at 3:22

Could you bit explain more what is not working in your code?
– Amit Chigadani
Jun 26 at 4:00

1 Answer
1

As far as I can see your method chaining is correct. What I miss is the ViewContainerRef. You have to set it once at least in order to tell Toastr where to appear. Please extend your code in home.ts as follows:

ViewContainerRef

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

constructor(
public toastr: ToastrService,
public toastrMgr: ToastrManager,
private renderer: Renderer2,
public _dataService: DataService,
public _messageService: MessageService,
private viewContainerRef: ViewContainerRef
) {
this.toastrMgr.setRootViewContainerRef(viewContainerRef);

// the rest of your code in constructor
}


Please note that it would be much easier if you'd place the ViewContainerRef in your hierarchically highest component. Usually is this app.component.ts. Otherwise you have to implement this VCR code in every single component that is supposed to show toaster-messages.

But for the start just try if this solution makes the toastr in home.ts appear.

I have tried your suggestion but seems setRootViewContainerRef is not valid on ToastrService and upon investigation I found that ToastrManager can have setRootViewContainerRef. Any other suggestions?
– Mohit Aggarwal
Jun 28 at 2:08

Which toastr do you use? ngx-toastr? ng2-toastr? ng-toastr? I need to know this in order to figure out what else could be wrong.
– DiabolicWords
Jun 28 at 4:53

I am using ngx-toastr
– Mohit Aggarwal
Jun 28 at 22:04

Sorry, I made a mistake. Of course you have to set the ViewContainerRef via ToastrManager and not via ToastrService. My bad. I corrected the code. Please try again.
– DiabolicWords
2 days ago

ToastrManager component is not present in this toastr Module. This is surprise though.
– Mohit Aggarwal
14 hours ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.