MEAN Stack Tutorial

[kamikite]

Hey everyone,

I tried to get into MEAN Stack Development. So I started wit hsome tutorials and follow this one:

MEAN Stack: Build an App with Angular and the Angular CLI — SitePoint

My problem is if I try to add a second new list element the first one is updated in the view too. In Mongo/Or after a refresh everything is fine.

view-list.component.ts

/*view-list.component.ts*/

import { Component, OnInit } from '@angular/core';
import { ListService } from '../list.service';
import { List } from '../models/List'

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

  //lists propoerty which is an array of List type
  private lists: List[] = [];

  constructor(private listServ: ListService) { }

  ngOnInit() {

    //Load all list on init
    this.loadLists();
  }

  public loadLists() {

    //Get all lists from server and update the lists property
    this.listServ.getAllLists().subscribe(
        response => this.lists = response,)
  }

  //deleteList. The deleted list is being filtered out using the .filter method
  public deleteList(list: List) {
    this.listServ.deleteList(list._id).subscribe(
      response =>    this.lists = this.lists.filter(lists => lists !== list),)
    }

  public onAddList(newList) {
    this.lists = this.lists.concat(newList);
    }

}

add-list.component.ts

/*add-list.component.ts*/

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { List } from '../models/List';
import { ListService } from '../list.service';

@Component({
  selector: 'app-add-list',
  templateUrl: './add-list.component.html',
  styleUrls: ['./add-list.component.css']
})
export class AddListComponent implements OnInit {
  private newList :List;

  @Output() addList: EventEmitter<List> = new EventEmitter<List>();

  constructor(private listServ: ListService) { }

  ngOnInit() {
      this.newList = {
          title: '',
          category:'',
          description:'',
          _id:''
      }
  }

  public onSubmit() {
      console.log(this.newList.category);
      this.listServ.addList(this.newList).subscribe(
          response=> {
              if(response.success == true)
                  this.addList.emit(this.newList);
          },
    );

    }
}