dujo-stack

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import * as M from 'materialize-css';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})
export class MessageComponent implements OnInit {

dujo-stack

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  
  private messageSource = new BehaviorSubject('');
  currentMessage = this.messageSource.asObservable();

dujo-stack

<div class="row">
        <button [routerLink]="['/article/new']" class="waves-effect waves-light btn blue right">Nuevo Articulo<i
            class="material-icons right">add</i> 
        </button> 
        
        <h4 class="h4">Articulos</h4>
        <div class="row">
                <div class="col s12 m4" *ngFor="let article of articleslist | async">
                        <div class="card small hoverable">
                            <div class="card-content">

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>

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

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 { 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

<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>