How to get value from one component to another?

Question

I have a small project working and i need to pass from one component to another text ( this information is passed from an array ).I should be able to click on a row and select that value so that i can then later on edit its parameters, which worked when i have the two .ts files in one component but as soon as i split them out then i cant figure it out as i am having both components on the screen the same time as seen below... later on the array will be stored on MONGODB. would it make more sense to create a server.ts file for the array? if so how would i then connect every thing?

The first code sniped is from my child component called Listevent.component.:

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

export interface PeriodicElement {
  date: number;
  club: string;
  name: number;
  flight: number;
  archers: number;
  scoring: number;
  awards: number;
}

const ELEMENT_DATA: PeriodicElement[] = [{
    date: 1288323623006,
    club: 'D',
    name: 1.0079,
    flight: 1,
    archers: 1,
    scoring: 1,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Helium',
    name: 4.0026,
    flight: 2,
    archers: 2,
    scoring: 2,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Lithium',
    name: 6.941,
    flight: 3,
    archers: 3,
    scoring: 3,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Beryllium',
    name: 9.0122,
    flight: 1,
    archers: 4,
    scoring: 4,
    awards: 0
  },
  {
    date: 1288323623005,
    club: 'Boron',
    name: 10.811,
    flight: 3,
    archers: 5,
    scoring: 5,
    awards: 0
  },
  {
    date: 1288323630066,
    club: 'Carbon',
    name: 12.0107,
    flight: 2,
    archers: 6,
    scoring: 6,
    awards: 0
  },
  {
    date: 1288323623006,
    club: 'Nitrogen',
    name: 14.0067,
    flight: 1,
    archers: 7,
    scoring: 7,
    awards: 0
  },
  {
    date: 1288323630068,
    club: 'Oxygen',
    name: 15.9994,
    flight: 4,
    archers: 8,
    scoring: 8,
    awards: 0
  },
  {
    date: 1288323630069,
    club: 'Fluorine',
    name: 18.9984,
    flight: 5,
    archers: 9,
    scoring: 9,
    awards: 0
  },
  {
    date: 11288323230060,
    club: 'Neon',
    name: 20.1797,
    flight: 2,
    archers: 10,
    scoring: 10,
    awards: 0
  },
];
@Component({
  selector: 'app-listevent',
  templateUrl: './listevent.component.html',
  styleUrls: ['./listevent.component.scss']
})
export class ListeventComponent implements OnInit {

  displayedColumns: string[] = ['date', 'club', 'name', 'flight', 'archers', 'scoring', 'awards'];
  dataSource = ELEMENT_DATA;
  EventName: string;
  constructor() {}

  ngOnInit() {}
  onRowClicked(row) {
    console.log('Row clicked: ', row);
    this.EventName = row.name + ' - ( ' + row.club + ' ) ';
  }
}

<style>
  table {
    width: 100%;
  }
</style>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Date</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.date | date:'yyyy-MM-dd Z'}} </td>
  </ng-container>
  <!-- Name Column -->
  <ng-container matColumnDef="club">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Club</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.club}} </td>
  </ng-container>
  <!-- Weight Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Name</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  <!-- Symbol Column -->
  <ng-container matColumnDef="flight">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Flight</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.flight}} </td>
  </ng-container>
  <ng-container matColumnDef="archers">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Archers</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.archers}} </td>
  </ng-container>
  <ng-container matColumnDef="scoring">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Scoring</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.scoring}} </td>
  </ng-container>
  <ng-container matColumnDef="awards">
    <th mat-header-cell *matHeaderCellDef>
      <h2><b>Awards</b></h2>
    </th>
    <td mat-cell *matCellDef="let element"> {{element.awards}} </td>
  </ng-container>
  <tr style="background-color: lightsteelblue; font-weight: bold" mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"></tr>
</table>

My second component is EventManagement.component.:

import {
  Component,
  OnInit,
  ViewChild,
  AfterViewInit
} from '@angular/core';
import {
  ListeventComponent
} from './listevent/listevent.component';

@Component({
  selector: 'app-eventmanagement',
  templateUrl: './eventmanagement.component.html',
  styleUrls: ['./eventmanagement.component.scss']
})
export class EventmanagementComponent implements OnInit, AfterViewInit {
  constructor() {}
  EventName1: string;
  @ViewChild(ListeventComponent) child;
  ngOnInit() {
    this.EventName1 = 'test';
  }
  ngAfterViewInit() {
    this.EventName1 = this.child.EventName;
    console.log(this.child.EventName);
  }
}

<style>
  main {
    width: 90%;
    margin: auto;
  }
  
  .page mat-card-header {
    justify-content: center;
  }
  
  .Event mat-card-header {
    background-color: #00acc1;
    justify-content: left;
  }
  
  .Event mat-card-header a {
    margin: auto;
  }
  
  .eventbody mat-card-content a {
    margin: auto;
  }
  
  table {
    width: 100%;
    border: 1px solid black;
  }
  
  main mat-card {
    margin-top: 0.5rem;
  }
</style>
<main>
  <mat-card style="border-radius: 25px" class="Event">
    <mat-card-header style="border-radius: 25px">
      <a mat-raised-button color="accent"> Events </a>
      <a mat-raised-button color="primary"> Flights </a>
      <a mat-raised-button color="primary"> Archers </a>
      <a mat-raised-button color="primary"> Scoring Groups </a>
      <a mat-raised-button color="primary"> Manage </a>
      <a mat-raised-button color="primary"> Awards </a>
      <a mat-raised-button color="warn"> Question/Support </a>
    </mat-card-header>
  </mat-card>
  <mat-card style="border-radius: 25px" class="eventbody">
    <mat-card-header style="border-radius:25px; background-color: lightsteelblue">
      <h4>Event: [ {{EventName1}} ]</h4>
    </mat-card-header>
    <mat-card-content>
      <a mat-raised-button color="primary" style="border-radius:25px;"> Create </a>
      <a mat-raised-button color="primary" style="border-radius:25px;"> Edit </a>
      <a mat-raised-button color="primary" style="border-radius:25px;"> Clone </a>
      <a mat-raised-button color="warn" style="border-radius:25px;"> Cancel </a>
    </mat-card-content>
  </mat-card>
  <mat-card>
    <app-createevent></app-createevent>
  </mat-card>
  <mat-card style="border-radius: 25px">
    <app-listevent></app-listevent>

  </mat-card>
</main>

Answer 1

Child to Parent:

ParentComponent:

export class AppComponent implements AfterViewInit  {
  @ViewChild(ChildComponent) child;

  name = 'Angular';
  message = '';

  ngAfterViewInit() {
    this.message = this.child.message
  }
}

ChildComponent:

export class ChildComponent  {
  @Input() name: string;
  message = 'Hey! I am in ChildComponent :)';
}

Here is the Stackblitz

Parent to Child:

Pass data to your child component from parent through template and @Input().

In the parent component:

<app-listevent [data]="data"></app-listevent>

And get it in the child component.ts:

@Input('data') data;

Do not forget to import the @Input() from Angular Core.

Answer 2

In your child component, make sure to use @Input, like so:

Import:

import { Input } from '@angular/core';

Set it, above the constructor function:

@Input() someVariable;

Use it, perhaps on ngOnInit:

if (this.someVariable === undefined) this.someVariable = 'default value';

Read more here.