CODEWITHSUNDEEP
angulartypescriptangular-componentsangular12
UiDeveloper819317
UiDeveloper819317

Reputation: 9

Angular Component not getting called

I am trying to load a toast message on load of a page.

I have added my component in the app.module.ts

@NgModule({
  declarations: [
    LandingComponent,
    ToastMessagesComponent
  ],

And I have created a toastMessageService for the toastMessage (fileName - toastMessageService.ts)

@Injectable({
  providedIn: 'root'
})
export class ToastMessageService {

  private readonly toastSubject = new Subject<ToastMessageState>();
  toastState = this.toastSubject.asObservable();
  constructor() { }
  show(status: string, message: string) {
    console.log("hello Inside toast message");
    this.toastSubject.next({
      show: true,
      status,
      message
    } as ToastMessageState);
  }
  hide() {
    this.toastSubject.next({
      show: false
    } as ToastMessageState);
  }
}

toastMessageState.ts

export interface ToastMessageState {
    show: boolean;
    status: string;
    message: string;
}

I have declared the below code in app.component.ts so that it can call the toastMessageService when the app gets loaded

ngOnInit() {
    console.log("Inside App Component****");
    this.toastMessageService.show("success", "hello");
  }

the show method is getting called from the service but the from there the expectation to call the component so it can load the html & css that it has and show a pop-up from the component

toastMessageComponent.ts

import {Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
import {Subscription} from 'rxjs';
// import {ToastMessageService} from '../../../../services/toastMessage/toast-message.service';
import {ToastMessageState} from './toastMessageState';
import {ToastMessageService} from "../../services/toastMessage/toast-message.service";
import {LandingFormService} from "../../services/landing-form.service";
// import {CONSTANT} from '../../../../app.constants';

@Component({
    selector: 'admin-portal-toast-messages',
    templateUrl: './toast-messages.component.html',
    styleUrls: ['./toast-messages.component.css'],
    providers: [ToastMessageService]
})
export class ToastMessagesComponent implements OnInit {

    status: any;
    message: any;
    show = false;
    private subscription: Subscription;
    constructor(private toastMessageService: ToastMessageService) { }

    ngOnInit() {
      console.log("In it Method for toast-message component");
        this.subscription = this.toastMessageService.toastState
            .subscribe((state: ToastMessageState) => {
                this.show = state.show;
                this.status = state.status;
                this.message = state.message === undefined && state.status === "failure" ?
                    "Internal Server Error" : state.message;
            });
        this.toastMessageService.show("success", "hello world!");
    }
    
    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

}

If I replace the existing working component in the app-routing.module.ts then it loads up fine. But if I call the service from app.component.ts then the component is not getting called.

Any help on this on what went wrong here, tried many ways but didn't work out.

thanks

Upvotes: 0

Views: 1749

Answers (1)

Juan
Juan

Reputation: 356

It might be that your component is not getting instantiated, hence the ToastMessagesComponent's ngOnInit is never invoked.

You need to "use" you component in app.component.html, like so,

... the HTML for you app file

<admin-portal-toast-messages></admin-portal-toast-messages>

It is working fine if you update the route in your app-routing.module.ts file because the router instantiates the component when the route is activated.

Keep in mind that declaring a component does not mean it will get instantiated, declaration just makes it available across the module.

Upvotes: 1

Related Questions