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?

angulartypescript

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an issue while trying to install npm for an existing Angular 4 project

As a newcomer to angular 4, I attempted to import an existing project into my local machine. Using npm install to fetch the nodes_modules as per the package.json of the project, resulted in the following error: Here is the error log: 36096 warn @angular/ ...

node.jsangularnpmnpm-installnode-modules

Retrieve the child nodes from the array and organize them into a

Given an array of regions, where the highest region has key: 10 and parent_id: null, the goal is to restructure this array in order to return a tree representation. The desired regions tree structure for input [10] should be: Egypt Zone 1 Tagamo3 Giza H ...

javascripttypescript

"Encountering a 404 Error when attempting to refresh an Angular 13 application hosted on an Apache

I have developed a prototype web application and now need to deploy it on an Apache server running Ubuntu OS. After building the web app, I hosted it on my local machine for testing purposes. I have configured the .htaccess file as follows: RewriteEngine ...

angular.htaccessangular-ui-routerapache2hash-location-strategy

Generate a byte array in JavaScript

How can a byte array be created from a file in JavaScript (or Typescript) to send to a C# WebApi service and be consumable by the C# byte array method parameter? Could you provide an example of the JavaScript code? The context here is an Angular 4+ applic ...

javascriptc#angularupload

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?

How can I ensure that the mat-menu-item button is the same size as the mat-menu itself? For example, click here <div class="container d-block d-md-none"> <div class="row"> <div class="col d-flex justify-content-cent ...

cssangulartwitter-bootstrap

Pause the execution at specific points within Typescript files by utilizing breakpoints when debugging with an attached debugger in VsCode

My current challenge involves setting up a debugger in VsCode with the attach mode on a Typescript codebase running in a Docker container. Despite successfully attaching the debugger in VsCode and hitting breakpoints, I consistently find myself landing on ...

typescriptdockerdebuggingvisual-studio-code

The validation of DOM nesting has detected that a <td> element cannot be placed within an <a> element

When working on a React project with Material UI, I encountered an issue while trying to create a table. My goal was to make the entire row clickable, directing users to a page with additional information on the subject. Below is the snippet of code for th ...

reactjstypescriptmaterial-uireact-router-dom

Cross-component communication in Angular

I'm currently developing a web-based application using angular version 6. Within my application, there is a component that contains another component as its child. In the parent component, there is a specific function that I would like to invoke when ...

javascriptangulartypescriptcomponents

Angular 2 router generates incorrect URLpaths

When navigating through my routes, I encountered an issue with the following routing setup: const routes: Routes = [ { path: '', component : HomeComponent, children: [] }, { path: 'login', ...

angularangular-ui-routerangular-cliangular-routing

Transform the date format from Google Forms to TypeScript

I am currently facing an issue with a Google Form connected to a Google Spreadsheet. The date format in the spreadsheet appears as follows when a response is received: 20/02/2023 18:58:59 I am seeking guidance on how to convert this date format using Type ...

typescriptdate

The child component is receiving undefined props, yet the console.log is displaying the actual values of the props

Struggling to implement a Carousel in my Gatsby-based app, I encountered an issue with passing props from the Parent to Child functional component. The error message "TypeError: props.slide is undefined" was displayed, but upon checking the console logs, i ...

reactjstypescriptcomponentscarouselreact-props

Condition not applying in the Modal

I implemented *ngif on a button to show/hide it based on a condition, but it's not working as expected. The button should appear when an item is selected from ng-select. Here is the button code: <button *ngIf="switch" (click)="productSaveInCart() ...

angulartypescriptangular2-templatengx-bootstrap

Difficulty encountered when combining create-react-app with typescript and immutable.js

After realizing that create-react-app now supports typescript, I encountered some issues while trying to transfer my current codebase from react-scripts-ts. Most of my classes are based on Record and cannot be constructed anymore due to errors like: Cannot ...

typescriptcreate-react-appimmutable.js

Is it necessary to declare variables in the component's ts file if they are only used in the template in Angular 2

Here is an example where the input is hidden initially and becomes visible when the user clicks a button. The question arises whether the variable showInput should be declared in the component's typescript file. @Component({ selector: 'exampl ...

angular

When compiling without the --aot flag, the matTable in Angular is causing an error stating "unable to read property 'find' of undefined."

An error is being thrown by the angular material table (matTable) when compiling without --aot. https://i.sstatic.net/i3qMF.png Although the application works fine when the target es version is set to es5, it heavily depends on es6 features. Therefore, i ...

angularangular-materialangular-material2angular-material-6

Guide to transforming a TaskOption into a TaskEither with fp-ts

I have a method that can locate an item in the database and retrieve a TaskOption: find: (key: SchemaInfo) => TO.TaskOption<Schema> and another method to store it: register: (schema: Schema) => TE.TaskEither<Error, void> Within my regis ...

typescriptfunctional-programmingfp-ts

Having trouble retrieving mobiscroll instance in Angular with Ionic

I'm facing an issue with accessing the instance of my mobiscroll widget in Angular 4 with Ionic Framework. Despite following all the correct steps, the actual widget won't get selected. Below is the code for the widget: <mbsc-widget [options ...

angularjstypescriptionic-frameworkmobiscroll

Guide on dynamically applying a CSS rule to an HTML element using programming techniques

Currently working with Angular 6 and Typescript, I am facing a unique challenge. My task involves adding a specific CSS rule to the host of a component that I am currently developing. Unfortunately, applying this rule systematically is not an option. Inste ...

javascriptangulartypescript

Retrieve upcoming route details within canDeactivate guard in the updated Angular2 router

Is there a way to retrieve the upcoming route information within the "canDeactivate" guard of Angular 2's new router? ...

angularrouter

Ignoring certificates when using ng-serve in Angular framework is common practice

I'm trying to host an Angular application securely over HTTPS by using ng-serve --host 0.0.0.0. The project I'm working on is built with Angular CLI version 1.2. However, Angular seems to ignore the certificates I provide and generates its own i ...

angulardockersslangular-cli