Communication parent vers enfant

Bonjour,

Je me forme sur Angular et je rencontre un soucis concernant l'affichage des données. J'utilise le property binding avec @Input mais je bloque...

Merci de m'aider.

Voici le template du parent

Code:

1
2
3
4
5
6
7
8
9
<ul  class="list-group">
    <li [ngClass]="{'list-group-item': true,
                    'list-group-item-success': post.loveIts > 0,
                    'list-group-item-danger': post.loveIts < 0}">
 
      <app-post-list-item *ngFor="let tab of tabs" [post]="tab">       
      </app-post-list-item>
    </li>
  </ul>

le TS du parent

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Component, OnInit } from '@angular/core';
import { PostListItemComponent } from '../post-list/post-list-item/post-list-item.component';
 
@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {
 
  tabs = [
  {
      title: 'Premier post',
      content: 'aaaaaaaaaa',
      loveIts: 0,
      created_at: new Date()
 
  },
  {
      title: 'Deuxieme post',
      content: 'zzzzzzzzzzz',
      loveIts: 1,
      created_at: new Date()
 
  }
 
];
 
  constructor() { }
 
  ngOnInit() {
  }
 
}

le template enfant

Code:

1
2
3
4
5
<h4> {{ post.title }} </h4><br> 
{{ post.content }}
<button class="btn btn-success" (click)="add()">Love it</button>
<button class="btn btn-danger" (click)="sub()">Don't love it</button>
<br>

et le TS enfant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { Component, OnInit, Input } from '@angular/core';
 
@Component({
  selector: 'app-post-list-item',
  templateUrl: './post-list-item.component.html',
  styleUrls: ['./post-list-item.component.css']
})
export class PostListItemComponent implements OnInit {
 
  @Input()  post: {
    title: string;
    content: string;
    loveIts: number;
    created_at: Date;
  }
 
  add() {
    this.post.loveIts++;
  }
 
  sub() {
    this.post.loveIts--;
  }
 
  constructor() { }
 
  ngOnInit() {
  }
 
}