dujo-stack

class AddBodyToArticles < ActiveRecord::Migration[5.1]
def change
  add_column :articles, :body, :string
end
end

dujo-stack

<!-- 
<li  >
    {{article.title}}
</li> -->
<div class="row" *ngFor="let article of articleslist | async">
    <div class="col s12 m6">
        <div class="card blue-grey darken-1">
            <div class="card-content white-text">
                <span class="card-title"> {{article.title}}</span>
                <!-- <p>I am a very simple card. I am good at containing small bits of information.

dujo-stack

{
        "id": 1,
        "title": "Tutorial",
        "created_at": "2019-09-18T05:51:05.658Z",
        "updated_at": "2019-09-18T05:51:05.658Z",
        "body": null
 }

dujo-stack

<form [formGroup]="articleForm" (ngSubmit)="onSubmit()">
    <div class="input-field col s12">
        <input id="title" formControlName="title" type="text">
        <label for="title" class="active">Titulo</label>
    </div>
    <div class="input-field col s12">
            <textarea id="body" formControlName="body" class="materialize-textarea"></textarea>
            <label for="body">Agregar el contenido</label>
    </div>
    <p>Form value: {{ articleForm.value | json }}</p>

dujo-stack

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { ArticleService } from 'src/app/services/article.service';
import { Article } from 'src/app/model/article';

@Component({
  selector: 'app-articles-form',
  templateUrl: './articles-form.component.html',
  styleUrls: ['./articles-form.component.css']

dujo-stack

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ArticleService {
 
  

dujo-stack

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ArticlesComponent } from './components/articles/articles.component';
import { RouterModule, Routes } from '@angular/router';
import { ArticlesFormComponent } from './components/articles/articles-form.component';

const routes: Routes = [
  { path: '', component: ArticlesComponent, pathMatch: 'full'},
  { path: 'article/new', component: ArticlesFormComponent },
  { path: '**', redirectTo: '' }

dujo-stack

<router-outlet></router-outlet>

dujo-stack

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; 
import { AppComponent } from './app.component';
import { ArticlesComponent } from './components/articles/articles.component';
import {ArticlesFormComponent} from './components/articles/articles-form.component'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { RouterModule } from '@angular/router';
import { MessageComponent } from './components/message/message.component';

dujo-stack

<router-outlet></router-outlet>