01_pcomponent

Primeiro Component !

Para referência a branch utilizada é a topicos/t2/p1.

Vamos criar o nosso primeiro componente, uma listagem de bolos. Um component é uma peça da sua aplicação, ela contém informação, lógica e o HTML para a exibição.

Todo código precisar estar dentro da pasta src\app.

Dentro da pasta do projeto digite:

cd src/app

Vamos criar uma pasta para deixar organizado:

mkdir bolo

depois

cd bolo

E vamos criar o primeiro component

ng generate component boloList OU ng g c boloList

O resultado está na branch topicos/t2/p2.

Para mais informações sobre ng generate acesse a documentação oficinal

BoloListComponent

Para referência a branch utilizada é a topicos/t2/p2.

Vamos olhar as alteraçoes que foram feitas no projeto.

1. Criação da pasta para o component bolo-list
2. Criação dos arquivos do component
   • bolo-list.component.css CSS do component.
   • bolo-list.component.html template html do componente Para ajudar veja.
   • bolo-list.component.spec.ts arquivo para teste unitário.
   • bolo-list.component.ts arquivo principal do componente, escrito em TypeScript.
3. Alteração do app.module.ts, para adicionar a declaração do component

 declarations: [
    AppComponent,
    BoloListComponent //Linha nova!!!
  ],

Usando BoloListComponent

Para referência a branch utilizada é a topicos/t2/p3.

Para ver as alteraçoes veja o DIFF das alteraçoes

Fiz algumas alterações para utilizar o boloList:

1. bolo-list.component.ts para adicionar as variáveis que serão utilizadas, e inicializei elas em locais distintos. Sobre o ciclo de vída do angula.
2. bolo-list.component.html para colocar o template para exibição e manipulação das variáveis. Para ajudar veja.
3. app.module.ts como foi usado o ngModel para realizar fazer o bind de variaveis, precisamos importar o FormsModule.

Neste exempo é possível ver algumas formas de manipulação a exibição de variáveis.

• Através do {{}} podemos exibir variáveis.
• Através do *ngFor e *ngIf podemos manipular a exibição dos elementos.
• Através do [] podemos manipular propriedades dos elementos HTML.
• Através do () podemos usar eventos do HTML.
• Através do [(ngModel)] podemos fazer o two way data binding