Ensure to verify the slot for any included content to see if it is vacant

I'm currently facing a dilemma without a clear solution in sight.

I have created some custom components that utilize content projection and multi slot transclusion.

For instance, I have a Card (Bootstrap) and I want to customize elements like the header, body, or a basic footer within a template.

<div class="card"> 
<ng-content select="[card-header]">
<!-- Anything inserted here will vanish :-) -->
</ng-content>

<ng-content select="[card-body]">
<!-- Anything inserted here will vanish :-) -->
</ng-content>

<ng-content select="[card-list]">
<!-- Anything inserted here will vanish :-) -->
</ng-content>
</div>

When using my component, the code would appear as follows:

<vng-control-card>
                <span card-header>
                    <fa-icon [icon]="['fas','user']"></fa-icon> User list
                </span>
                <div card-list>
                    <vng-control-userlist [showSendButtons]="false"></vng-control-userlist>
                </div>
            </vng-control-card>

As observed, there is no body, only a card-list and a header. However, the body is still being rendered. How can I verify if there is any content for a slot? If the slot is empty, it should not be displayed.

For example: Rendered userlist (component)

The yellow portion represents the empty slot "card-body" which is rendered and appended to the dom despite being empty.

Is there a solution to check and prevent this from happening?

angulartypescriptbootstrap-4

Answer №1

Discovering a workaround for this issue was quite interesting. The challenge arose with angular elements, where the DOM element persisted even when the slot was empty.

My solution involved targeting the slot's class, 'title', in the CSS code:

.title:empty { display: none }

By implementing this, the element will be removed if the slot is empty.

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

I am seeking a way to access the child infoWindow within a Google Maps marker in Angular 5

I am working on an Angular 5 application that utilizes the Angular Google Maps(AGM) library available at . I have implemented functionality where clicking on an item in a list within one component triggers the display of a child infoWindow associated with ...

angulargoogle-maps

"Integrating Laravel 5.4 Backend with Angular 5 Frontend: A Step-by-Step

Currently, I am immersed in a project that involves creating a frontend using Angular 5 and backend business logic using Laravel 5.4 with MySQL Database. As someone new to this technology stack, I find myself grappling with establishing the data flow conne ...

javascriptangularlaravelangular5

Functional programming: Retrieve the initial truthy output from executing an array of diverse functions using a particular parameter

As I delve into the world of functional programming in TypeScript, I find myself contemplating the most idiomatic way to achieve a specific task using libraries like ramda, remeda, or lodash-fp. My goal is to apply a series of functions to a particular dat ...

javascripttypescriptfunctional-programminglodashramda.js

Ensuring Safe Definition of HTMLCollectionOf Elements in TypeScript with React

I'm currently working on creating a d3 line chart using react and typescript, and I'm using https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91 as a reference for implementing the mouse over functionality. During one step of the proce ...

reactjstypescriptd3.jstslint

Using Angular and RxJS5 to refresh data from both HTTP requests and sockets

Here's a specific scenario I need to address: Retrieve route parameters Utilize route parameters to make an HTTP service call Upon receiving a response from the HTTP service, use the same route parameters to invoke a socket service Whenever the sock ...

angularrxjs5

What is the best way to transform private variables in ReactJS into TypeScript?

During my conversion of ReactJS code to TypeScript, I encountered a scenario where private variables were being declared in the React code. However, when I converted the .jsx file to .tsx, I started receiving errors like: Property '_element' d ...

reactjstypescript

Steps to adding an item to a TypeScript array

My code involved creating an array called dataArray of type dataRows, which is an interface. dataArray: Array<dataRows>; In a function, I attempted to push a dataRows object into the array like this: this.dataArray.push(row) But for some ...

angulartypescript

Typescript error: The property 'set' is not found on type '{}'

Below is the code snippet from my store.tsx file: let store = {}; const globalStore = {}; globalStore.set = (key: string, value: string) => { store = { ...store, [key]: value }; } globalStore.get = (key) => { return store[key]; } export d ...

javascriptreactjstypescriptnext.js

Upon completion of a promise in an express middleware and breaking out of a loop, a 404 error is returned

In my efforts to retrieve an array of object (car) from express using database functions in conjunction with the stolenCarDb object, everything seems to be working fine. However, when attempting the following code snippet, it results in a 404 error w ...

node.jstypescriptloopsexpresspromise

The tag 'ngRedux' is not recognized as a property on the 'AppModule' type

After working tirelessly to integrate redux into angular6, the application is functioning smoothly. However, an error is being thrown in the node cli - 'Property 'ngRedux' does not exist on type 'AppModule'. Whenever I include N ...

angularreduxreact-reduxangular6

Utilizing chrome.scripting to inject scripts in TypeScript

I am currently facing an issue wherein I am attempting to integrate chrome extension JavaScript code with TypeScript: const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); let result; try { [{ result }] = await c ...

javascripttypescriptgoogle-chrome-extension

What is the best way to convert a JSON string received from Angular into a Java Object within a Spring

I am currently utilizing WebSocket to create a chat application. Below is the code from my Angular application that sends a MessageModel object to the backend after converting it into a JSON string: sendMessage(message: MessageModel){ let data = JSON.str ...

javaangularspring-bootwebsocketstomp

How to send variables to a function when a value changes in TypeScript and Angular

As someone who is new to Angular and HTML, I am seeking assistance with the following code snippet: <mat-form-field> <mat-select (valueChange)="changeStatus(list.name, card.name)"> <mat-option *ngFor="let i of lists"> {{i.name}} ...

htmlangulartypescript

Accessing embedded component within an Angular template

I have a ng-template that I utilize to generate a modal with a form on top of one of my other components like this: <div> <h1>Main component content...</h1> <button (click)="modals.show(newthingmodal)">Create New T ...

htmlangulartypescript

Using a static class reference as a parameter in a generic type leads to a error

Before I submit a ticket on github, I want to double-check that I'm not making any mistakes. The issue should be clear enough: class A {} class B { static A = A; } function foo<T>(arg: T) {} // this is valid const b = new B.A; // "B" only ...

typescriptgenerics

Design an array specifically for runtime using a union type

Imagine I have the following union type: type Browser = 'Chrome' | 'Firefox' I am looking to convert this into an array: const browsers = /* code to change Browser type into ['Chrome', 'Firefox'] The goal is to u ...

typescriptunion-types

Linking a button to a (click) event within HTML content fetched from the backend

Hey there, I'm facing a scenario where I have an angular service that sends a HTTP request to the backend for some HTML code. Once the HTML is received, I'm inserting it into the component's HTML using <div [innerHTML]="..."/>. The iss ...

htmlangular

What is the best way to prioritize .py-md-6 over .p-3 in Bootstrap 4?

I have set the padding for the class .py-md-6 as follows: .py-md-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; } Despite this, there seems to be a conflict with the .p-3 class in my HAML element: #id.p-3.py-md-6 It appears th ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Using Typescript to remove an element from an array inside another array

I've encountered an issue while trying to remove a specific item from a nested array of items within another array. Below is the code snippet: removeFromOldFeatureGroup() { for( let i= this.featureGroups.length-1; i>=0; i--) { if( this.featureGr ...

javascriptarraystypescriptmultidimensional-array

Using TypeORM: Implementing a @JoinTable with three columns

Seeking assistance with TypeORM and the @JoinTable and @RelationId Decorators. Any help answering my question, providing a hint, or ideally solving my issue would be greatly appreciated. I am utilizing NestJS with TypeORM to create a private API for shari ...

sqltypescriptcomposite-primary-keynestjstypeorm