This project was generated with Angular CLI version 14.0.3.
Para criar o projeto use:
ng new <nome-do-projeto>
Para rodar o projeto use:
ng serve -o
O parametro -o fara abrir uma nova aba automaticamente
Para gerar componentes, services e outros use:
ng generate directive|pipe|service|class|guard|interface|enum|module
Exemplo: ng generate component component-name
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 <------>
],
-
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