LearningAngular

This project was generated with Angular CLI version 14.0.3.

Criando o projeto

Para criar o projeto use:

ng new <nome-do-projeto>

Rodando o projeto

Para rodar o projeto use:

ng serve -o

O parametro -o fara abrir uma nova aba automaticamente

Gerando componentes/services/pipes.

Para gerar componentes, services e outros use:

ng generate directive|pipe|service|class|guard|interface|enum|module

Exemplo: ng generate component component-name

Two-way binding

Com two-way binding você pode atualizar variáveis em tempo real

Vamos testar:

{{title}}
<br>
<input [(ngModel)]="title" name="name">

Para usar o modo two-way binding você precisará usar colocar o [ngModel] entre parênteses como foi feito a cima.

Para testar usaremos a variável title contida no app.components.ts

Também precisaremos importar o FormModule em app.module.ts

import { FormsModule } from '@angular/forms';  <------>

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule   <------>
  ],

Usando componentes

Primeiro gere seu componente como mostrado anteriormente (geraremos um chamado new-component)
Após isso importe o componente em app.module.ts (caso tenha usado o comando ng generate será importado automaticamente)

import { NewComponent } from './new-component/new-component.component';

@NgModule({
  declarations: [
    AppComponent,
    NewComponent
  ],

Depois de ter importado você terá que renderizar o componente no HTML, em new-component.component.ts você pode escolher o nome que será usado para renderizar o component

@Component({
  selector: 'app-new-component', <-Nome que será usado para renderizar o component->
  templateUrl: './new-component.component.html', <-html para implementar seu componente->
  styleUrls: ['./new-component.component.css'] <-css para implementar seu componente->
})

Finalmente iremos renderizar o component

<app-new-component></app-new-component>

Após renderizar o componente apararecerá new-component works! na sua página

lucasfroque / learning-angular