I'm learning Angular and trying to do an exercise where I add dynamic posts to a webpage, while interacting with API.

The front page looks like this:

The form needs to be filled out and then the content is added below. Everything works fine and the content is being added, but in order for it to get updated I have to refresh the page while my goal is to add it dynamically. In order to do it I tried using an event emitter. Below is the code:

this is the component for the form (post-form.component.ts):

import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Post } from 'src/app/interfaces';
import { PostService } from 'src/app/services/post.service';

@Component({
  selector: 'app-post-form',
  templateUrl: './post-form.component.html',
  styleUrls: ['./post-form.component.css']
})
export class PostFormComponent implements OnInit {
  @Output() addPostEvent: EventEmitter<Post> = new EventEmitter();
  post: Post = {
    title: '',
    body: ''
  };
 
  loading:boolean=false;
  constructor(private postService:PostService) { }

  ngOnInit(): void {
  }

  onSubmit(form: NgForm) {
    
    this.loading = true;
    this.postService.writePost(this.post).subscribe(post => {
      this.addPostEvent.emit(post);
      this.post = {
        title: '',
        body: ''
      };
      this.loading = false;
      
    })
  }
}

(post-feed.component.ts):

import { Component, OnInit } from '@angular/core';
import { Post } from '../../interfaces';
import { PostService } from 'src/app/services/post.service';


@Component({
  selector: 'app-post-feed',
  templateUrl: './post-feed.component.html',
  styleUrls: ['./post-feed.component.css']
})
export class PostFeedComponent implements OnInit {
 posts: Post[];

  constructor(private postService:PostService) { }

  ngOnInit() {
    this.postService.getPosts().subscribe(posts => {
      this.posts=posts;
    })
  }
    
  onPostAdded(newPost: Post) {
    this.posts.unshift(newPost);
  }
    
}

post-form.component.html:

<form
    *ngIf="!loading"
    
    #postForm="ngForm"
    (ngSubmit)="onSubmit(postForm)"
    style="margin:50px"
    >

    <div >
        <label for="title">Title</label>
        <input type="text"
        
        name="title"
        [(ngModel)]="post.title"
        required
        >
        <span  data-error="Field must not be empty"></span>
    </div>
    <div >
        <label for="body">Body</label>
        <input type="text"
        
        name="body"
        [(ngModel)]="post.body"
        required
        >
        <span  data-error="Field must not be empty"></span>
    </div>
    <button type="submit"
     [disabled]="!postForm.valid"
    >Add</button>
</form>

<div  *ngIf="loading">
    <div >
        
    </div>
</div>

post-feed.component.html:

<br><br>
<div >
    <div >
        <app-post-form>
            (addPostEvent)="onPostAdded($event)"
        </app-post-form>
    </div>
</div>
<br><br>

<div >
    <div  *ngFor="let post of posts">
        <div >
            <div >
                <p >
                    {{ post.title }}
                </p>
                <p >
                    {{ post.createdAt | date }}
                </p>
                <p> {{ post.body }}</p>
            </div>
            <div >
                <a href="#">Edit</a>
                <a href="#">Delete</a>
            </div>
        </div>
    </div>
</div>

post.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Post } from '../interfaces';

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

  url: string = 'https://ndb99xkpdk.execute-api.eu-west-2.amazonaws.com/dev';

  options = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  }
  constructor(private http: HttpClient) {}

  getPosts():Observable<Post[]> { 
    return this.http.get<Post[]>(`${this.url}/posts`)
  }

 writePost(post: Post): Observable<Post> {
    if (post.id) {
      return null;
    } else {
      return this.http.post<Post>(`${this.url}/post`, post, this.options);
    }
  }

}

interface.ts:

export interface Post {
    id?:string;
    createdAt?:string;
    userId?:string;
    title:string;
    body:string;

}

There are no errors in the console. What am I doing wrong? Bless your heart!

CodePudding user response：

in post-feed.component.html:, replace it:

<app-post-form>
    (addPostEvent)="onPostAdded($event)"
</app-post-form>

with:

<app-post-form (addPostEvent)="onPostAdded($event)">
</app-post-form>

CodePudding user response：

    this.postService.writePost(this.post).subscribe(post => {
      this.addPostEvent.emit(post);

This emits the response of your backend server ${this.url}/post. I guess your server does not return the posted contents.

Try modifing this.addPostEvent.emit(post); to this.addPostEvent.emit(this.post);