Чем отличается директива от компонента в Angular и когда что использвать?

Компонента имеет свой шаблон и с ним работает (как изолированное под-приложение), директива не имеет шаблона (хотя возможность есть) и ставится на чужой шаблон чтобы изменить поведение.

Если речь идет о втором ангуляре то вот, там собственно все - директивы, только разные и назначение вполне соответствует описанию
https://angular.io/guide/attribute-directives

There are three kinds of directives in Angular:

Components—directives with a template.
Structural directives—change the DOM layout by adding and removing DOM elements.
Attribute directives—change the appearance or behavior of an element, component, or another directive.

Если первый, там компоненты появились после директив, и их функционал немного пересекается, но тоже есть неплохое объяснение, когда следует предпочесть компоненту.
https://docs.angularjs.org/guide/component

Advantages of Components:

simpler configuration than plain directives
promote sane defaults and best practices
optimized for component-based architecture
writing component directives will make it easier to upgrade to Angular

When not to use Components:

for directives that need to perform actions in compile and pre-link functions, because they aren't available
when you need advanced directive definition options like priority, terminal, multi-element
when you want a directive that is triggered by an attribute or CSS class, rather than an element