<file_sep>import { Component, Input, OnInit } from '@angular/core';
//import { read } from 'fs';

@Component({
  selector: 'app-post-list-item',
  templateUrl: './post-list-item.component.html',
  styleUrls: ['./post-list-item.component.scss']
})
export class PostListItemComponent implements OnInit {

  @Input() postTitle: string;  // 1* permet de rendre définisable la variable par le component parent html
  @Input() postContent: string;    // Permet de créer des propriétes personalisées
  @Input() postLoveIts: number;
  @Input() postCreated_at: Date;  

  

  totalLoves = 0;
  onLoveIts() {
    this.totalLoves++;
  }

  totalHates = 0;
  onHateIts() {
    this.totalHates++;
  }

  getColor() {
    if(this.totalLoves == this.totalHates){
      return 'black';
    } else if(this.totalLoves > this.totalHates){
      return 'green';
    } else if (this.totalLoves < this.totalHates){
      return 'red';
    }
    
  }

  constructor() { }

  ngOnInit() {
  }

}
<file_sep>import { Component, OnInit } from '@angular/core';

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

  posts = [ // 1' On crée la liste posts, qui permettra au html de créer une *ngFor 
  {
    title: 'Post Numero 1',
    content: 'Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).',
    loveIts: 0,
    created_at: new Date()
  },
  {
    title: 'Post Numero 2',
    content: 'Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).',
    loveIts: 0,
    created_at: new Date()
  },
  {
    title: 'Post Numero 3',
    content: 'Es un hecho establecido hace demasiado tiempo que un lector se distraerá con el contenido del texto de un sitio mientras que mira su diseño. El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras, al contrario de usar textos como por ejemplo "Contenido aquí, contenido aquí". Estos textos hacen parecerlo un español que se puede leer. Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto, y al hacer una búsqueda de "Lorem Ipsum" va a dar por resultado muchos sitios web que usan este texto si se encuentran en estado de desarrollo. Muchas versiones han evolucionado a través de los años, algunas veces por accidente, otras veces a propósito (por ejemplo insertándole humor y cosas por el estilo).',
    loveIts: 0,
    created_at: new Date()
  }
];

  constructor() { }

  ngOnInit() {
  }

}
