Creating and using non-angular component 2

Question

Creating and using non-angular component 2

Navigation

#1 by (1 votes)

0

I have created this component to show message of success or not.

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

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.css']
})
export class SnackBarComponent {

  snackBar: MatSnackBar

  constructor(

  ) {}

  openSnackBar(message: string, isOnline : boolean) {
    this.snackBar.open(message, undefined, 
      { duration: 3000, 
        panelClass: isOnline ? ["online", "onlineAction"] : "offline" }
      );
  }
}

To call I'm doing this:

onSubmit(form){
    const snackBarComponent = SnackBarComponent;
    snackBarComponent.prototype.openSnackBar(dados.mensagem, true);
}

Only you have this error in the browser console:

ERROR TypeError: Cannot read property 'open' of undefined
        at Object.SnackBarComponent.openSnackBar (snack-bar.component.ts:18)
        at MunicipioFormComponent.onSubmit (municipio-form.component.ts:115)
        at Object.eval [as handleEvent] (MunicipioFormComponent.html:1)
        at handleEvent (core.js:13547)
        at callWithDebugContext (core.js:15056)
        at Object.debugHandleEvent [as handleEvent] (core.js:14643)
        at dispatchEvent (core.js:9962)
        at eval (core.js:12301)
        at SafeSubscriber.schedulerFn [as _next] (core.js:4343)
        at SafeSubscriber.__tryOrUnsub (Subscriber.js:243)
    View_MunicipioFormComponent_0 @ MunicipioFormComponent.html:1
    proxyClass @ compiler.js:14653
    DebugContext_.logError @ core.js:14996
    ErrorHandler.handleError @ core.js:1509
    dispatchEvent @ core.js:9966
    (anonymous) @ core.js:12301
    schedulerFn @ core.js:4343
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
    SafeSubscriber.next @ Subscriber.js:190
    Subscriber._next @ Subscriber.js:131
    Subscriber.next @ Subscriber.js:95
    Subject.next @ Subject.js:56
    EventEmitter.emit @ core.js:4311
    NgForm.onSubmit @ forms.js:5762
    (anonymous) @ MunicipioFormComponent.html:1
    handleEvent @ core.js:13547
    callWithDebugContext @ core.js:15056
    debugHandleEvent @ core.js:14643
    dispatchEvent @ core.js:9962
    (anonymous) @ core.js:10587
    (anonymous) @ platform-browser.js:2628
    ZoneDelegate.invokeTask @ zone.js:421
    onInvokeTask @ core.js:4740
    ZoneDelegate.invokeTask @ zone.js:420
    Zone.runTask @ zone.js:188
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1517
    globalZoneAwareCallback @ zone.js:1543
    MunicipioFormComponent.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

What can it be?

angular

asked by anonymous 06.04.2018 / 01:16

1 answer

Error generating PDF report with mpdf60 Place image in header / footer

score 1 · Answer 1

You are not initializing the snackBar, you have to by it in the constructor by angular inject it.

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

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.css']
})
export class SnackBarComponent {     

  constructor(
      private snackBar: MatSnackBar,
      private messageService: MessageService
  ) {
  this.message.getMessages().subscribe(message=>this.openSnackBar(message.message, message.isOnline ))
}

  openSnackBar(message: string, isOnline : boolean) {
    this.snackBar.open(message, undefined, 
      { duration: 3000, 
        panelClass: isOnline ? ["online", "onlineAction"] : "offline" }
      );
  }
}

message.service.ts

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

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

    constructor() {}

    addMessage(message) {
        this.messageSubject.next(message);
    }

    getMessages(): Observable<any> {
        return this.messageSubject.asObservable();
    }
}