Why to use @input @output over subject/services?

Question

Generally while passing data from child to parent or parent to child we use @input and @output what are the benefits @input and @output have over subject or services apart from it's the most organic way of doing it as Angular itself provided it. Does it have anything to do with change detection?

Thanks in advance

Answer 1

A very simple use case for this would be:

@Component({
    selector: 'app-hello'
})
export class HelloComponent {
    @Input() username;
}

<!-- hello.component.html -->
<h1>Hello {{ username }}</h1>

<!-- app.component.html -->
<app-hello username="Peter"></app-hello>
<app-hello username="Pan"></app-hello>

The main reason we have inputs and outputs is that they allow data communication between components without coupling them together.