Creando una noticia

Para trabajar con angular y formularios (particularmente con <input>) recurriremos al modulo AngularForms.

Instalando Angular Forms

Comenzaremos haciendo npm install del modulo.

$ npm install @angular/forms --save

Luego en nuestro archivo bootstrap.js registraremos dicho modulo (FormsModule) como dependencia de nuestro NgModule. Asi mismo registraremos un nuevo componente NewPostComponent que crearemos luego.

src/frontend/bootstrap.js

import 'reflect-metadata' import 'zone.js' import { platformBrowserDynamic } from '@angular/platform-browser-dynamic' import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { FormsModule } from '@angular/forms' import AppComponent from './app/components/app.component' import PostComponent from './app/components/post.component' import NewPostComponent from './app/components/newPost.component' @NgModule({ imports: [ BrowserModule, FormsModule ], styleUrls: ['./style.css'], declarations: [ PostComponent, NewPostComponent, AppComponent ], bootstrap: [ AppComponent ] }) class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule)

Creando el primer formulario

Creamos entonces el archivo newPost.component.js y declaremos allí nuestro nuevo modulo NewPostComponent. El mismo deberá renderizar el siguiente html:

<form>
    Nueva noticia:
    <input placeholder="Titulo" name="title">
    <textarea placeholder="Contenido" name="content"></textarea>

    <button type="button">Crear noticia</button>
<form>

El archivo final lucirá algo así:

src/frontend/app/component/newPost.component.js

import { Component } from '@angular/core'; @Component({ selector: 'newPost', template: `<form> Nueva noticia: <input [(ngModel)]="data.title" placeholder="Titulo" name="title"> <textarea [(ngModel)]="data.content" placeholder="Contenido" name="content"></textarea> <button type="button" (click)="onSubmit()">Submit</button> <form>` }) export default class NewPostComponent { constructor() { this.data = {} } onSubmit() { console.log("Noticia creada", this.data) } }

El componente <input> recibirá por medio del parametro ngModel el objeto que deberá mostrar. Utilizamos la notiación [(ngModel)] para especificar que se trata de un two-way-binding. Esto es decir que si cambia el valor de data.title el componente input refrescará su valor; por otro lado si el componente modifica el valor mostrado se actualizará data.title.

results matching ""

    No results matching ""