message.component.ts

import { Component, OnInit, ViewEncapsulation, Input, HostListener, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "custom-message",
  template: `
    <p [class]="type">
      {{message}}
    </p>
  `,
  styles: [
    `p{display:block; padding:20px;background:#000; color:#fff; font-size:20px; font-family:inherit;}`,
    `.success{background:rgb(65, 234, 212);}`,
    `.failure{background:rgb(255, 32, 110);}`
  ],
  encapsulation: ViewEncapsulation.Native
})
export class MessageComponent implements OnInit {
  @Input() message: string = "test";
  @Input() type: string = "";
  @Output("action") action = new EventEmitter();

  @HostListener("click")
  onclick() {
    this.action.emit("clicked");
  }

  constructor() {}

  ngOnInit() {}
}