1

I'm creating a set of bespoke form components in Angular 9. One of which is an Account Dropdown which uses another component Dropdown List within its template. The Dropdown List component already has logic which uses content-projection (ng-content) to show any Message components found within its instantiated markup as error messages. What I'd like to do is instantiate a Message component (child) inside the Account Dropdown (Grandparent) as below but render the html for the message inside the Dropdown List (parent).

App HTML:

   <b-account-dropdown formControlName="account">
    <b-account-dropdown-label>Error</b-account-dropdown-label>
    <b-account-item
       ...props
    ></b-account-item>
    <b-account-item
       ...props
    ></b-account-item>
    <b-account-item
       ...props
    ></b-account-item>
    <b-message [error]="true">
      <strong>Error:</strong>
      Ooops, it looks like something has gone wrong.
    </b-message>
  </b-account-dropdown>

account-dropdown.component.html

<b-dropdown-list
  [showIndicators]="true"
  [placeholder]="placeholder"
  [scrollable]="scrollable"
>
  <b-dropdown-list-label>
    <ng-content select="b-account-dropdown-label"></ng-content>
  </b-dropdown-list-label>
  <ng-container ngProjectAs="b-tooltip-icon">
    <ng-content select="b-tooltip-icon"></ng-content>
  </ng-container>
  <b-dropdown-list-option
    *ngFor="let item of items"
    [value]="item.value"
    [disabled]="item.disabled"
    ></b-dropdown-list-option> 
</b-dropdown-list>

dropdown-list.component.html

    <!-- HTML FOR DROPDOWN HERE -->

    <div *ngIf="messages.length">
      <ng-content select="b-message"></ng-content>      
    </div>

Does anyone know if or how this is possible?

Thanks

James Howell
  • 1,392
  • 5
  • 24
  • 42
  • goal isn't clear. need to see what exactly you're trying to accomplish and what's going on in the parent and child templates. – bryan60 Jun 17 '20 at 17:12
  • Have added extra files to show the relationship between the components – James Howell Jun 17 '20 at 17:31
  • Really I don't know if you are asking about multiple ng-content, https://stackoverflow.com/questions/52638718/multiple-ng-content or simply show `form.get('account').errors` – Eliseo Jun 17 '20 at 17:44
  • I’m not asking about multiple ng-content in the same component. Grandparent = Account Dropdown. Parent = Dropdown List and Child = Message. I want to instantiate the message component within the Account Dropdown but as the AD uses the Dropdown List I need to pass the ng-content on from parent to grandchild. – James Howell Jun 17 '20 at 20:28

0 Answers0