How can I allow an output event from one Angular element to update the value of another Angular element?

Question

Please note that this question has to do with Angular Elements, which is detailed here. This functionality allows for the creation of HTML elements from compiled Angular components.

I am working on modernizing an old web application piece-by-piece. The target framework is Angular, and so to ease the transition we are creating Angular elements to replace difference pieces of our old code.

The basic structure is as follows: I have a menu-bar component whose output I want to use to update a content component.

menu-bar.component.ts

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

@Component({
  templateUrl: './menu-bar.component.html',
  styleUrls: ['./menu-bar.component.css']
})
export class MenuBarComponent implements OnInit {
  @Output() menuItemId = new EventEmitter()

  constructor() { }

  ngOnInit() {
  }

  sendId(id: number) {
    console.log(id)
    this.menuItemId.emit(id)
  }
}

content.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { HttpService } from '../../services/http.service';
import { Data } from '../../classes/data.model';
import * as chemReact from '../../classes/reactionResult.model';

@Component({
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
  @Input() initialContentId: number;

  initialContent: Data;

  constructor(
    private httpService: HttpService) { }

  ngOnInit() { }

  ngOnChanges() {
    console.log("Content ID was changed to " + this.initialContentId)

    this.httpService.getData(this.initialContentId)
      .subscribe(c => {
        console.log("Returned from subscription")
        this.initialContent = Object.assign(new Data(), c);
        console.log("Initial content is " + this.initialContent.name);
        this.initialContent.createdData.subscribe(data =>
            console.log("Created Data is " + data))
        this.substances.push(this.initialContent);
      });
  }
}

When running the Angular project as a standalone app, this works properly. However, after I've exported the components as elements and included them in my legacy project:

<div class="menu">
    <menu-bar></menu-bar>
</div>
<div class="main" id="main-container">
    <content
        initialContentId="menuItemId"></content>
</div>

<script>
    const component1 = document.querySelector('menu-bar');
    component1.addEventListener('menuItemId', (event) => {
        const component2 = document.querySelector('content')
        console.log("Changing content ID to " + event.detail)
        component2.initialContentId= event.detail
    })
</script>

the content control does not update when the input is changed.

Possibly Helpful Information

• When I click on an item in the menu component, all of my console logging statements get called, so I know I'm properly receiving and then sending the event.
• Say I click "Menu Item 1". When I click "Menu Item 2", the results I expect for "Menu Item 1" will show up in the control. So I know that the content component is getting the data set, it's just not updating when I expect it to.