What is the difference between an Angular component, directive, pipe and service?

Four building blocks with four distinct jobs.

• Component — a directive with a template. It owns a piece of the UI, its own styles, and the logic that drives them. Every screen is a tree of these.
• Directive — behaviour attached to an existing element, with no template of its own. Two kinds: structural directives change the DOM layout and are prefixed with an asterisk, such as *ngIf and *ngFor; attribute directives change appearance or behaviour, such as ngClass, or a custom one that adds a tooltip.
• Pipe — a value transformer used in templates, such as {{ price | currency:'INR' }}. Pure pipes are memoised and only re-run when the input reference changes, which makes them cheap; impure pipes run on every change detection cycle and should be avoided.
• Service — a class with no UI at all, holding business logic, HTTP calls, or shared state, and injected wherever needed.

The rule that ties them together: components should stay thin. If a component is making HTTP calls and transforming data, that logic belongs in a service, and the formatting belongs in a pipe.