Managing multiple `ng-content` slots in Angular can be a daunting task. Here

Question

Managing multiple `ng-content` slots in Angular can be a daunting task. Here

I am facing an issue with a component where I have declared an input as follows:

@Input() isOverlay: boolean

The template html for this component looks like this:

  
        <ng-template *ngIf="isOverlay" cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="active">
          <div class="context-menu__header">
            <strong>{{ label }}</strong>
          </div>
          <ng-content></ng-content>
          <div class="context-menu__footer"></div>
        </ng-template>

        <ng-container *ngIf="!isOverlay">
          <div class="context-menu__header">
            <strong>{{ label }}</strong>
          </div>
          <ng-content></ng-content>
          <div class="context-menu__footer"></div>
        </ng-container>

Although it works, the presence of two ng-content tags seems to be causing an issue. When I pass the boolean value as true and comment out the second ng-content tag, it works fine. But if I leave both ng-content tags, it doesn't work. Any idea why?

angular typescript

Answer 1

Answer №1

After attempting to replicate the issue you mentioned, I realized it was quite challenging without sufficient details. I managed to come up with a solution: here is the stackblitz link

component.ts

export class HelloComponent {
  isOpen = false;
}

component.html

<button (click)="isOpen = !isOpen" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
   show overlay with stuff
</button>
<hr/>
<ng-template
*ngIf="isOpen"
cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="trigger"
[cdkConnectedOverlayOpen]="isOpen"
>
   from overlay: 
   <ng-container *ngTemplateOutlet="tpl"></ng-container>
</ng-template>
<div *ngIf="!isOpen">
   outside overlay: 
   <ng-container *ngTemplateOutlet="tpl"></ng-container>
</div>
<ng-template #tpl>
   <ng-content></ng-content>
   World!
</ng-template>

In a single component, only one projection of ng-content is allowed. By placing it within the ng-template, it can be shared across multiple sections. However, displaying it simultaneously in numerous places is not recommended.

If you wish to showcase it multiple times, nest it inside a separate template within the parent component and pass the ng-template through normal @Input binding. You may refer to this documentation for further clarification: Click here for more information

Answer 2

After attempting to replicate the issue you mentioned, I realized it was quite challenging without sufficient details. I managed to come up with a solution: here is the stackblitz link

component.ts

export class HelloComponent {
  isOpen = false;
}

component.html

<button (click)="isOpen = !isOpen" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
   show overlay with stuff
</button>
<hr/>
<ng-template
*ngIf="isOpen"
cdkConnectedOverlay
[cdkConnectedOverlayOrigin]="trigger"
[cdkConnectedOverlayOpen]="isOpen"
>
   from overlay: 
   <ng-container *ngTemplateOutlet="tpl"></ng-container>
</ng-template>
<div *ngIf="!isOpen">
   outside overlay: 
   <ng-container *ngTemplateOutlet="tpl"></ng-container>
</div>
<ng-template #tpl>
   <ng-content></ng-content>
   World!
</ng-template>

In a single component, only one projection of ng-content is allowed. By placing it within the ng-template, it can be shared across multiple sections. However, displaying it simultaneously in numerous places is not recommended.

If you wish to showcase it multiple times, nest it inside a separate template within the parent component and pass the ng-template through normal @Input binding. You may refer to this documentation for further clarification: Click here for more information

Managing multiple `ng-content` slots in Angular can be a daunting task. Here

Answer №1

Similar questions

Is it possible to retrieve all mandatory attributes of a TypeScript object?

Tips for saving the generated POST request ID for future use in another function

What is the best choice for a package.json file in an ASP.NET MVC project: devDependencies or dependencies?

An issue was encountered when attempting to log out the user from Firebase

Closing the side navigation bar when a router link is clicked on small devices

Exploring Vue.js lifecycle events and when to begin loading store properties (Vue.observable)

Filter error - Unable to retrieve property 'toLowerCase' from null value

How come this mocha test is exceeding its timeout limit when making a basic call with mongoose?

Invoke Observable.subscribe() sequentially

There is no index signature containing a parameter of type 'string' within the type '{ appointments: { label: string; id: number; minWidth: number; }[]; }'

Display an API generated popup list using Vue's rendering capabilities

What is the most effective method for sharing a form across various components in Angular 5?

The modal feature on ng-bootstrap.github.io is failing to function properly when used with the Bootstrap3 CSS

The React component using createPortal and having its state managed by its parent will remain static and not refresh upon state modifications

Error message: Angular 7 - Running out of memory due to JavaScript heap

Tips for transferring observable to parent component in angular 2?

Troubleshooting the accessibility issue between Docker node container and Angular/Node.js

What is the recommended data type to assign to the `CardElement` when using the `@stripe/react-stripe-js` package in TypeScript?

The TypeScript compilation is missing Carousel.d.ts file. To resolve this issue, ensure that it is included in your tsconfig either through the 'files' or 'include' property

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?