Na verdade, os componentes também são diretivas, mas têm diferenças entre eles.
Diretivas de atributos :
As diretivas de atributo são classes que podem modificar o comportamento ou a aparência de um único elemento. Para criar uma diretiva de atributo, aplique o @Directivea uma classe.
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[custom-attr]", })
export class CustomAttrDirective {
constructor(element: ElementRef) {
element.nativeElement.classList.add("bg-success", "text-white");
}
}
Adicionando um atributo de diretiva template.html File
<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
<td>{{i + 1}}</td>
<td>{{item.name}}</td>
</tr>
Diretivas Estruturais :
As diretivas estruturais alteram o layout do documento HTML adicionando e removendo elementos, como micro-modelos. As diretivas estruturais permitem que o conteúdo seja adicionado condicionalmente com base no resultado de uma expressão como, *ngIfou para que o mesmo conteúdo seja repetido para cada objeto em uma fonte de dados como *ngFor.
Você pode usar as diretivas integradas para tarefas comuns, mas escrever diretivas estruturais personalizadas fornece a capacidade de adaptar o comportamento ao seu aplicativo.
<p *ngIf="true">
Expression is true and ngIf is true.
This paragraph is in the DOM.
</p>
<p *ngIf="false">
Expression is false and ngIf is false.
This paragraph is not in the DOM.
</p>
Componentes :
Os componentes são diretivas que possuem seus próprios modelos, em vez de depender do conteúdo fornecido de outro lugar. Os componentes têm acesso a todos os recursos de diretiva, ainda têm um elemento de host, ainda podem definir propriedades de entrada e saída e assim por diante. Mas eles também definem seu próprio conteúdo.
Pode ser fácil subestimar a importância do modelo, mas o atributo e as diretivas estruturais têm limitações. As diretivas podem fazer um trabalho útil e poderoso, mas não têm muitos insights sobre os elementos aos quais se aplicam. As diretivas são mais úteis quando são ferramentas de uso geral, como a ngModeldiretiva, que pode ser aplicada a qualquer propriedade do modelo de dados e qualquer elemento de formulário, sem levar em conta para que os dados ou o elemento estão sendo usados.
Os componentes, por outro lado, estão intimamente ligados ao conteúdo de seus modelos. Os componentes fornecem os dados e a lógica que serão usados pelas vinculações de dados que são aplicadas aos elementos HTML no modelo, que fornecem o contexto usado para avaliar as expressões de vinculação de dados e atuar como a cola entre as diretivas e o resto do aplicativo. Os componentes também são uma ferramenta útil para permitir que grandes projetos angulares sejam divididos em partes gerenciáveis.
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'app-hero-child',
template: `
<h3>{{hero.name}} says:</h3>
<p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
@Input('master') masterName: string;
}
do angular oficial
do livro Pro-Angular