directivas

 son atributos que pueden cambiar la apariencia o el comportamientp del dom element.

hay cuatro toipo sde directivas

:

1.- estructurales

2.- atributos

3.- directivas cunstoms

4.- los componentes son directivas como template

estudiaremos dos directivas 

el *ngFor y el *ngIf

I crea un array en appcomponent. y llamalo cities

export class AppComponent {

  Cities = ['barcelona', 'madrid', 'lima']

  title = 'retoD1';

  url = 'https://cdn.pixabay.com/photo/2017/10/17/16/10/fantasy-2861107_1280.jpg';

  name!:string

}

II  crea un ul y coloca el ng for alli 

<ul  *ngFor="let citi of Cities">

  <li>{{ citi }}</li>

</ul>

esto mostrara todas las ciudades

nota que tambien hay un name declarado pero no inicalizado

en el html coloca 

<p *ngIf="name">el nombre es {{ name }}</p>

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

recuerda importar en app modele el forms model

el codigo solo mostrará el p si hay algo en name sino no lo mostarrá.