Angular cuenta con directivas de control propias que para ser utilizadas o crear tus propias directivas. Estas se utilizan para modificar el DOM dinámicamente. Para agregar directivas propias, Recuerda guardarla en el modulo shared mas informacion

ng g d shared/directives/nombre

<aside> 🔗 👉🏻https://angular.io/api/common👈🏻

</aside>

ngModel

Permite hacer data binding, ósea conectar entre un dato y un componente y es importado del modulo de FormsModule que se encuentra en @angular/form, se importa en el archivo module, ****y existen dos tipo con [ ( ) ] y solo con ( )

hace un enlace de doble sentido, es decir, si se actualiza la vista se actualiza el valor y si se actualiza el valor se actualiza la vista.

<input type="text" **[**(ngModel)**]**="title">

hace un enlace de un sólo sentido, este sentido va desde el modelo a la vista, pero la vista NO puede actualizar al modelo. Pueden copiar y pegar este código para comprobarlo.

<input type="text" (ngModel)="title">

NgIf

es la condicional de if y para ser puede ser utilizada en el template anteponiendo * esta es una condición booleana si es true se muestra el bloque de codigo.

<div *ngIf="true">
    {{product.percentaje}}
  </div>

NgFor

Es una directiva de iteración "for" y se utiliza para hacer recorridos de objetos como los array,

se declara un variable "value" que almancenara cada uno de los registros

con el of asigna de donde sale los datos "array"

<app-product-md
        *ngFor="let value of array;
								index as i"
        [input]="value"
      >
  </app-product-md>

si queremos tener los index del array podemos declarar llamar la propiedad index y renombrarla a con as

NgSwitch

es la manera de realizar condicionales de un grupo de selecciones decir si la variable que puede tener varios resultados ingresara al switch y en cada swichCase validara cual cumple la condición y si no cumple ninguna entrara al SwitchDefault

<div [ngSwitch]="variable">
   <p *ngSwitchCase="condicion">
		...
	</p>
...
   <p *ngSwitchDefault>...</p>
</div>

NgStyle

Por medio de style podemos asignar estilos CSS de manera dinámica cuando una condición se cumple, esto puede ayudar mucho cuando queremos cambiar la apariencia de algún elemento dependiendo de un resultados.

[ngStyle]="{
'propiedad css':valor dinamico
}"

NgClass

Igual que NgStyle nos ayuda a cambiar la apariencia del elemento la diferencia es que no agrega un estilo particular si no una clase CSS

[ngClass]="{'clases css' : condicional }"