Parent -> child

W parencie dodajemy zmienną

export class AppComponent {
    tasksList = ['xyz', 'test, 'elem'];
}

Następnie w children .ts

export class ChildComponent implements OnInit {
    @Input() tasks; //trzeba doinstalować moduł inputa z core
}

następnie żeby przypisać wartość z parenta do właściwości dziecka trzeba w miejscu wywołania (czyli np w app.component.html

<tag-childrena [tasks]="tasksList"></tag-childrena>

Nasłuchiwanie zmiennych z serwisu

Używamy rxjs (lekcja 52 kursu)

new Subject<number>; //trzeba zaimportować

Child -> Parent

w children .ts definiujemy zmienną, która jest instancją obiektu EventEmitter

eventTask = new EventEmitter<string>();

następnie np. przy jakiejś funkcji odpalanej po kliku:

select(task) {
    this.eventTask.emit(task);
}

a w miejscu wywołania w szablonie (np w app.component.html)

<tag-childrena (eventTask)="selected($event)"></tag-childrena>

tutaj odpalana jest akurat funkcja selected. Przesyłany parametr musi mieć nazwę $event

a w .ts parenta:

selected(dowolnaNazwaZmiennej: string): void{
    console.log(dowolnaNazwaZmiennej);
}

Przesyłanie poprzez ngcontent

Jeżeli wywołujemy w parencie jakieś child i pomiędzy tagami umieścimy jakiś html, żeby się wyświetlił, musimy dodać w child tag ng-content czyli:

w parencie:

<app-child>
    tutaj jakiś html
</app-child>

w dziecku (w pliku html dziecka konkretniej:

<p>jakiś normalny tekst z componentu</p>
<ng-content></ng-content>

to sprawi, że na stronie wyświetli się tekst „tutaj jakiś html”