Angular 6 - Call modal-window component from another component

Question

I have two component: Login, MessageBox

I want to call messageBox(whitch represent modal-window) when authorization is not ok from LoginComponent, but a got this error. It looks like I did't register a component. But when a register component in app.component.ts i got this error. What is the root of the problem. I'm really stuck here.

LoginComponent

        import { Component, OnInit, ViewChild, Directive } from '@angular/core';
        import { FormBuilder, FormGroup, Validators } from '@angular/forms';

        import { FuseConfigService } from '@fuse/services/config.service';
        import { fuseAnimations } from '@fuse/animations';

        import { DataService } from '../../../data.service';
        import { Observable } from 'rxjs';
        import { Router } from '@angular/router';
        import { MessageBox, MessageBoxDialog } from '../messageBox/messageBox.component'

        @Component({
          selector: 'fuse-login-2',
          templateUrl: './login-2.component.html',
          styleUrls: ['./login-2.component.scss'],
          animations: fuseAnimations,
          providers: [MessageBox]
        })

        export class FuseLogin2Component implements OnInit {
          //@ViewChild(MessageBox)

          loginForm: FormGroup;
          loginFormErrors: any;
          email: string;
          password: string;
          appAccess: Object;

          constructor(
            private fuseConfig: FuseConfigService,
            private formBuilder: FormBuilder,
            private data: DataService,
            private router: Router,
            private messageBox: MessageBox
          ) {
            this.fuseConfig.setConfig({
              layout: {
                navigation: 'none',
                toolbar: 'none',
                footer: 'none'
              }
            });

            this.loginFormErrors = {
              email: {},
              password: {}
            };
          }

      ngOnInit() {
        this.loginForm = this.formBuilder.group({
          email: ['', [Validators.required, Validators.email]],
          password: ['', Validators.required]
        });

        this.loginForm.valueChanges.subscribe(() => {
          this.onLoginFormValuesChanged();
        });
      }

// HERE BEGIN MY PROBLEM
      AuthentificateUser() {
        this.data.authentificateUser(this.email, this.password).subscribe(data => this.appAccess = data);
        console.log(this.data);

          if (this.appAccess == true) {
            this.router.navigate(['sample']);
          }
          else if (this.appAccess == false) {
            this.messageBox.openDialog(); // I can see method from another component
          }
      }

MessageBox Component

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

/**
 * @title Dialog Overview
 */
@Component({
  selector: 'messageBox',
  templateUrl: 'messageBox.component.html',
  styleUrls: ['messageBox.component.scss'],
})
export class MessageBox {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  public openDialog(): void {
    let dialogRef = this.dialog.open(MessageBoxDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }
}

@Component({
  selector: 'messageBox.component-dialog',
  templateUrl: 'messageBox.component.html',
})
export class MessageBoxDialog {

  constructor(
    public dialogRef: MatDialogRef<MessageBoxDialog>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }

}

AppComponent

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';

import { locale as navigationEnglish } from './navigation/i18n/en';
import { locale as navigationTurkish } from './navigation/i18n/tr';

import { MessageBox, MessageBoxDialog } from './main/content/messageBox/messageBox.component';

@Component({
  selector: 'fuse-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private translate: TranslateService,
    private fuseNavigationService: FuseNavigationService,
    private fuseSplashScreen: FuseSplashScreenService,
    private fuseTranslationLoader: FuseTranslationLoaderService,
    private messageBox: MessageBox
  ) {
    // Add languages
    this.translate.addLangs(['en', 'tr']);

    // Set the default language
    this.translate.setDefaultLang('en');

    // Set the navigation translations
    this.fuseTranslationLoader.loadTranslations(navigationEnglish, navigationTurkish);

    // Use a language
    this.translate.use('en');
  }
}

Answer 1

MessageBox is a component, and components can't be injected. You should refactor it to a service.

A simpler solution would be to just call this.dialog.open(MessageBoxDialog); instead of this.messageBox.openDialog(); within the login component.

You can read more about the differences between services and components here.

Working code

See this StackBlitz.