Передача данных из выбранного в другой компонент - Angular Материал

Question

У меня есть два компонента в принципе. Первый из них содержит Angular Параметр материала (параметр циновки) для выбора параметра в комбинированном списке. Второй должен показать выбранные данные. Я создал общий сервис, используя Subject с надеждой передать его между ними, но это не повезло.

Сервис

@Injectable()
export class ToothpasteService {
    toothpasteName: Subject<string>;
    toothpasteName$: Observable<any>;

    constructor() {
        this.toothpasteName = new Subject();
        this.toothpasteName$ = this.ladderkantName.asObservable();
    }
}

Первый компонент (ToothpasteComponent.ts)

export class ToothpasteComponent implements OnInit {
  toothpastes: Toothpaste[] = [
    {value: 'to-0', viewValue: 'Toothpaste A'},
    {value: 'to-1', viewValue: 'Toothpaste B'},
    {value: 'to-2', viewValue: 'Toothpaste C'},
  ]
  constructor(private toothpasteService: ToothpasteService) { }

  onToothpasteChanged(toothpasteValue: any) {
    this.toothpasteService.toothpasteName.next(toothpasteValue);
  }

ToothpasteComponent. html

       <div class="container">
            <mat-form-field>
            <mat-label>Select your toothpaste: </mat-label>
            <mat-select>
                <mat-option *ngFor="let toothpaste of toothpastes" [value]="toothpaste.viewValue" (onSelectionChange)="onToothpasteChanged(toothpaste.viewValue)">
                    {{toothpaste.viewValue}}
                </mat-option>
            </mat-select>
            </mat-form-field>
       </div>

Второй компонент (HeaderComponent.ts)

export class HeaderComponent implements AfterViewChecked {
  toothpasteName: string;

  constructor(private toothpasteService: ToothpasteService) { 
  }

  ngAfterViewChecked() {
    this.toothpasteService.toothpasteName$.subscribe((toothpasteData)=>{
      this.toothpasteName = toothpasteData;
    })
  }
}

HeaderComponent. html

  <div class="justify-content-start align-items-start align-self-center">
    <p>Toothpaste Selected: {{toothpasteName}}</p>
  </div>

Это делает не работа. Я что-то упустил?