Repository: angular
Issue: docs: Confusing information on Angular Elements guide page 
Labels: area: elements,core: dynamic view creation,P3,area: docs

### Describe the problem that you experienced

On page https://next.angular.io/guide/elements, in "Example: A Popup Service" section, there is the following remark:

> Previously, when you wanted to add a component to an application at runtime, you had to define a dynamic component, and then you would have to load it, attach it to an element in the DOM, and wire up all of the dependencies, change detection, and event handling, as described in [Dynamic Component Loader](https://next.angular.io/guide/dynamic-component-loader).

But, on the https://next.angular.io/guide/dynamic-component-loader page, there is no information and example at all how to do all those steps. Whats on this page instead, is just a brief explanation of NgComponentOutlet directive, and code example.

This is important, because the next point of this Angular Elements page, completely misses the mark. It shows the comparison of long block of code, that is allegedly needed without using custom elements, and how it easily can be done with them. The honest comparison would be with NgComponentOutlet directive instead.

The alleged "Old way", which isn't really described anywhere in documentation AFAIK:
```
// Previous dynamic-loading method required you to set up infrastructure
  // before adding the popup to the DOM.
  showAsComponent(message: string) {
    // Create element
    const popup = document.createElement('popup-component');

    // Create the component and wire it up with the element
    const popupComponentRef = [createComponent](https://next.angular.io/api/core/createComponent)(PopupComponent, {
      environmentInjector: this.injector,
      hostElement: popup,
    });

    // Attach to the view so that the change detector knows to run
    this.applicationRef.attachView(popupComponentRef.hostView);

    // Listen to the close event
    popupComponentRef.instance.closed.subscribe(() => {
      document.body.removeChild(popup);
      this.applicationRef.detachView(popupComponentRef.hostView);
    });

    // Set the message
    popupComponentRef.instance.message = message;

    // Add to the DOM
    document.body.appendChild(popup);
  }
```

And the concise custom elements way:
```
// This uses the new custom-element method to add the popup to the DOM.
  showAsElement(message: string) {
    // Create element
    const popupEl: [NgElement](https://next.angular.io/api/elements/NgElement) & [WithProperties](https://next.angular.io/api/elements/WithProperties)<PopupComponent> = document.createElement(
      'popup-element',
    ) as any;

    // Listen to the close event
    popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));

    // Set the message
    popupEl.message = message;

    // Add to the DOM
    document.body.appendChild(popupEl);
  }
```

The way it is right now, seems like dishonest cherry-picking by author to sell the usage of custom elements. It would looked more honest, if the  then the comparison was between usage of NgComponentOutlet, not the low-level API that isn't even explained in the linked chapter, that is supposed to explain it.

### Enter the URL of the topic with the problem

https://next.angular.io/guide/elements

### Describe what you were looking for in the documentation

-The page correctly links to a different page that explains the low-level API (used in the "Example: A Popup Service" section), instead of redirecting to page about NgComponentOutlet.
-Or., in the "Example: A Popup Service" section,  show the comparison with NgComponentOutlet, and possibly suggest why you should use one way over another - assuming you "own" the component, and don't have to necessarily rely on custom element registry.

### Describe the actions that led you to experience the problem

_No response_

### Describe what you want to experience that would fix the problem

_No response_

### Add a screenshot if that helps illustrate the problem

_No response_

### If this problem caused an exception or error, please paste it here

_No response_

### If the problem is browser-specific, please specify the device, OS, browser, and version

_No response_

### Provide any additional information here in as much as detail as you can

_No response_