Podemos tornar nosso botão ainda melhor ativando ou não a lógica de confirmação:

// alurapic/client/app/botao/botao.component.ts 

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'botao',
    templateUrl: './botao.component.html'
})
export class BotaoComponent {

    @Input() nome: string = 'Ok';
    @Input() estilo: string = 'btn-default';
    @Input() tipo: string = 'button';
    @Input() desabilitado: boolean = false;
    @Output() acao = new EventEmitter();
    @Input() confirmacao: boolean = false;

    executaAcao() {

        if(this.confirmacao) {
            if(confirm('Tem certeza?')) {
                this.acao.emit(null); 
            }
            return; 
        }          
        this.acao.emit(null);
    }
}

Por fim, que tal usarmos nosso botão em CadastroComponent? Vamos substituir nosso botão Salvar pelo nosso novo botão:

<! -- alurapic/client/app/cadastro/cadastro.component.html -->

<!-- código anterior omitido -->

<botao 
    nome="Salvar" 
    tipo="submit" 
    estilo="btn-primary" 
    [desabilitado]="!meuForm.valid">
</botao>

Agora temos um botão genérico que podemos usar em vários lugares da nossa aplicação.

Quando um evento é disparado, podemos transferir com o evento um dado. Quem responder ao evento, terá acesso ao dado. Que tal vermos esse processo para sabermos ainda mais sobre eventos customizado?

Quando disponibilizamos um dado com um evento customizado, é uma boa prática definirmos o tipo da instância de EventEmitter. A vantagem disso é que o tipo passado para a generic de EventEmitter faz com que o método emit aceite apenas dados desse tipo:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'meuComponente',
  templateUrl: './meu-component.html'
})
class MeuComponent { 

   @Output meuEvento = new EventEmitter<number>(); // tipando o EventEmitter

   executaAcao() {
       this.meuEvento.emit(10); // como nosso EventEmitter é do tipo number, podemos passar um número. Qualquer outra coisa geraria um erro de compilação.
   }
}

O template do nosso componente.

<!-- meu-component.html -->
<button click="executaAcao()">Meu botão</button>

Dentro do template de outro componente qualquer, usamos nosso componente através do seu selector:

<meuComponent meuEvento="metodoQualquerdoComponent($event)"></meuComponent>

Veja que associamos ao meuEvento um método de um componente, no caso aquele cujo template utilizou meuComponent. Como meuComponet em sua definição dispara um evento click que por debaixo dos panos chama this.meuEvento.emit(10), assim que for disparado, chamará o método definido em meuEvento do nosso componente. Este método tem acesso a $event. Sendo assim, no método, $event passa a ser o dado que disponibilizamos.

metodoQualquerDoComponent(event) {

    alert(event); // exibe 10!
}