1.13.5.1. fejezet, Szülő - gyerek kommunikáció

import { Component } from '@angular/core';
 
export interface PostItem {
  title: string,
  content: string,
}
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'forras-ng-module';
  postList : Array<PostItem> = [
    {'title':'Post 1','content':'My first post'},
    {'title':'Post 2','content':'My second post'},
    {'title':'Post 3','content':'My third post'}
  ];
}

<main class="main">
  <app-header></app-header>
  <app-sidebar></app-sidebar>
  <post-list [postList]="postList"></post-list>
</main>

import {Component, Input } from '@angular/core';
import {PostItem} from '../app.component';
 
@Component({
  selector: 'post-list',
  templateUrl: './post-list.component.html',
  styleUrl: './post-list.component.css'
})
export class PostListComponent {
  @Input() postList: PostItem[] = []; // !!!!!!!!!! Fontos az @Input dekorátor  !!!!!!!!!!
}

@for(item of postList; track postList) {
  <h1>{{item.title}}</h1>
  <p>{{item.content}}</p>
} @empty {
  <p>List is empty</p>
}

import {Component, ViewChild, AfterViewInit, AfterContentChecked} from '@angular/core';
import {PostListComponent} from './post-list/post-list.component';
 
export interface PostItem {
  id: number;
  title: string,
  content: string,
}
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent implements AfterViewInit, AfterContentChecked {
  @ViewChild(PostListComponent) child: any
  title = 'forras-ng-module';
  message: string = "";
  initialized: boolean = false;
  postList : Array<PostItem> = [
    {'id':1, 'title':'Post1','content':'My first post'},
    {'id':2, 'title':'Post2','content':'My second post'},
    {'id':3, 'title':'Post2','content':'My third post'},
  ];
  constructor() {
    console.log('child message on Constructor is:' + this.child)
  }
 
  ngAfterViewInit() {
    console.log('child message on AfterViewInit is:', this.child)
  }
 
  ngAfterContentChecked() {
    if (!this.initialized && this.child) {
      console.log('child message on AfterContentChecked is:' + this.child)
      this.message = this.child.message;
      this.initialized = true;
    }
  }
}

<main class="main">
  <app-header></app-header>
  <app-sidebar></app-sidebar>
  <!--<app-home></app-home>-->
  {{message}}
  <p>Message count: {{counter}}</p>
  <post-list [postList]="postList" (countEventEmitter)="receiveMessage($event)"></post-list> <!-- // A countEventEmitter a lényeges -->
</main> 

import {Component, Input, Output, EventEmitter, AfterViewInit} from '@angular/core';
import {PostItem} from '../app.component';
 
@Component({
  selector: 'post-list',
  templateUrl: './post-list.component.html',
  styleUrl: './post-list.component.css'
})
export class PostListComponent implements AfterViewInit {
  @Input() postList: PostItem[] = []
  message = "Hello from child"
  postCount: number = 0;
  @Output() countEventEmitter = new EventEmitter()  // !!!!!!!!!!! Fontos az @Output dekorátor !!!!!!!!!!!
 
  ngAfterViewInit(): void {
    this.postCount = this.postList.length;
    this.countEventEmitter.emit(this.postCount)
  }
 
  incCounter() {
    this.postCount++
    this.countEventEmitter.emit(this.postCount)
  }
 
  decCounter() {
    this.postCount--;
    this.countEventEmitter.emit(this.postCount)
  }
}

  receiveMessage(count: number) {
    this.counter = count;
  }