angular - call function from different typescript file

Question

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!

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

score 1 · Accepted Answer · 2018-06-29 05:39:51Z

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:

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.

edited Jun 29, 2018 at 5:39

answered Jun 26, 2018 at 4:26

user6749601

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

6 Comments

Mohit Aggarwal Over a year ago

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?

user6749601 Over a year ago

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.

Mohit Aggarwal Over a year ago

I am using ngx-toastr

user6749601 Over a year ago

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.

Mohit Aggarwal Over a year ago

ToastrManager component is not present in this toastr Module. This is surprise though.

|

Collectives™ on Stack Overflow

angular - call function from different typescript file

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related