¿Cuándo crear una directiva frente a un componente?

La mayoría de las aplicaciones Angular están compuestas por una mayoría de componentes y solo unas pocas directivas, si acaso. Hoy, me gustaría mostrarte un ejemplo donde una directiva tiene mucho más sentido que un componente.

Considera el siguiente template de un componente:

Hemos creado un componente vinculado a un único elemento HTML (botón), y toda la lógica en ese template se trata de cambiar los valores de los atributos (para la clase isActive y el atributo disabled).

Para lograr esto, necesitábamos tres entradas especializadas que resultaron en una pérdida de reutilización:

Lo anterior no es ideal porque:

• Nuestro botón solo puede mostrar texto, no HTML (por ejemplo, no se pueden agregar íconos).
• Nuestro botón asume que su estado siempre depende de saved y hasError, pero ¿qué pasa si queremos agregar una tercera variable para otros casos de uso?

En lugar de eso, creemos una directiva:

Que se usaría de la siguiente manera:

Esta implementación es mucho mejor porque:

• Funcionaría con cualquier elemento HTML, no solo botones (siempre que el elemento soporte disabled correctamente).
• El botón puede mostrar cualquier cosa, no solo texto.
• Los criterios para que isActive sea verdadero dependen del caso de uso y no están ligados solo a saved y hasError.

El punto aquí es que usar una directiva en ese escenario hizo que nuestro código fuera más flexible y, como resultado, más reutilizable. Por eso, las bibliotecas de componentes populares dependen en gran medida de las directivas en lugar de los componentes. Aquí tienes un ejemplo de la documentación de Angular Material:

Puedes ver que mat-button es una directiva, no un componente. De esta manera, se puede usar tanto con un botón como con una etiqueta a. Puedes encontrar el código de ejemplo de esta publicación en Stackblitz.

Piensa en esto la próxima vez que te sientas tentado a crear un componente con una o dos líneas de HTML en su template. Lo más probable es que lo que necesites sea una directiva.

Consulta este tutorial para otro ejemplo de una directiva que tiene perfecto sentido en lugar de usar un componente.

Fuente:
https://www.angulartraining.com/