Diferença entre @Output() e @Input()

Bom dia Victor, Não faço parte da equipe de suporte da Alura, mas gostaria de poder ajudá-lo:

@Input() - é utilizado quando você tem um componente "pai" que possui uma determinada informação (ex: atributo) e que irá chamar dentro de seu template(html) um componente filho que precisa receber essa informação que o componente pai o passou e assim "renderizar" em sua estrutura / escopo interno

@Output() - é utilizado quando você tem justamente uma situação inversa ao de cima (Input), ou seja, no caso é um componente filho que irá passar alguma informação para o componente pai para que este manipule e "renderize" esse dado em sua estrutura / escopo interno

Segue um exemplo prático:

Component Login (PAI) -> repare que esse componente login está "chamando" um componente filho: "filho-input-container" e nessa chamada está sendo informado um atributo de nome label e com o valor textual: E-mail

  <div class="col-12">
    <filho-input-container class="input-group" label="E-mail">
      <input class="form-control" id="loginEmail" type="text" placeholder="E-mail" formControlName="email">
    </filho-input-container>
  </div>

Componente (FILHO) -> repare que o atributo "label" recebido do componente pai, está com o decorator: @Input no código abaixo, ou seja, esse componente filho que faz o papel de um Input Component Reutilizável, recebe um valor definido lá no componente pai, que no exemplo é "E-mail". Assim o componente filho poderá fazer o que quiser / for necessário dentro de seu escopo com esse valor.

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'filho-input-container',
  templateUrl: './filho-input-container.component.html'
})
export class FilhoInputComponent {
  @Input() public label!: string;

  constructor() { }
}

Obrigado.