Angular: Display or conceal elements without impacting element alignment

I am facing an issue with displaying brand names in a row of divs containing product information. Some products have a brand name, while others do not. My goal is to maintain consistent spacing regardless of whether there is a brand name present.

So far, I have attempted using ngIf and the hidden directive, but neither has yielded the desired outcome.

<div  *ngFor="let product of products">
    <h5 class="product-brandname" [hidden]="!product.brandname">{{product.brandname}}</h5>
   <img/>
   etc...
</div>

htmlcssangular

Answer №1

To ensure that the h5 element remains visible and does not collapse, use a non-breaking space as the default value:

<h5 class="product-brandname">{{ product.brandname || "&nbsp;" }}</h5>

If you want to hide empty h5 elements while still keeping their space occupied, you can set the visibility attribute in their style to hidden. In this case, the default text can be any non-empty string:

<h5 class="product-brandname" [style.visibility]="product.brandname ? 'visible' : 'hidden'">
  {{ product.brandname || "Some text" }}
</h5>

Take a look at this stackblitz for a demonstration.

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

Retrieve all "comments" associated with a particular "photo" id using Angular Firestore (angularfire2)

I'm a bit unsure of how to phrase this, but in MySQL I believe it's referred to as "Joining" or something along those lines. Within my database, I have a collection titled "Photos". I am looking to allow users to add "Comments" to each photo. Th ...

angulargoogle-cloud-firestoreangularfire2

Utilizing Angular 2 Services for Seamless Data Sharing Among Components

I am currently working on implementing a service that will help me define a shared resource called client across multiple views. The process involves selecting the client from an index and then setting it up as follows: itemTapped(event, client) { this. ...

angularrxjsobservableangular-servicesangular2-observables

Altering the placement of a single element from floating to fixed positioning in CSS

Currently in the process of designing a basic website, I am looking to modify the behavior of the navigation bar on the left-hand side. I want it to remain fixed in its position so that users can scroll through the page without losing sight of it. My main ...

htmlcsspositioningcss-position

How can I go about importing and modifying Excel data in Angular version 6?

Incorporating the bulk import module into my current project involves importing records from an Excel file, viewing and editing these records in local storage. I am currently struggling to find a solution for implementing this functionality using Angular ...

htmlcssjsonexcelangular6

I need help figuring out how to use a bash script to generate an HTML file by incorporating the contents of the template.vars file

I am looking to enhance the functionality of this script by having it generate an HTML file based on the data found in template.vars. Currently, the script acts as a basic template engine that prompts for user input and replaces instances of @NAME@ with th ...

htmlbashtemplatestemplate-enginehtml-generation

Angular 2: The window.crypto.subtle.importKey function functions properly on 'localhost' but encounters issues on an 'ip' address

As a newcomer to Angular 2, I am working on creating a login form that encrypts and sends the user's emailid and password to the server. I have successfully implemented AES-ECB using AES-CTR from the following link: https://github.com/diafygi/webcry ...

javascriptangularencryptionwebcrypto-api

Preventing Blogger from automatically adding indentations to image links

After reading through this post, I have a follow-up question. My blog on blogger.com includes frequent image uploads, but I'm encountering an issue with unwanted margin-left and margin-right being automatically added as inline style for each linked pi ...

htmlstylesmarginindentationblogger

Storing Personalized Information in Thingsboard; Beyond Telemetry Data

I am currently utilizing the amazing platform of thingsboard. Imagine I have a basic User Form with the following fields: Username First Name Last Name Email Address Phone Number My goal is to store all this information in thingsboard. Can thingsboard h ...

javascriptangularangularjsthingsboard

What is the best way to insert my words within the boundary?

I am seeking assistance on inserting text within the border I created using an image. As I continue to add more text, I want it to display within the border as I type. Any guidance you can provide would be greatly appreciated. Thank you! li { list-sty ...

htmlcss

Delete a specific element from an array using a specified criteria

I'm attempting to remove a specific item from an array based on the selected option. To better understand, take a look at this code: component.html <fnd-extended-select label="Tipo Prodotto:" [(ngModel)]="landingType" name="tipoprodotto"> ...

arraysangulartypescriptsplice

Keep two Navbars fixed at the top while scrolling

I currently have two Navbars positioned at the top. To view the code, click here: https://jsfiddle.net/5e3hbr8p/ My goal is to keep both Navbars fixed at the top even when scrolling to the bottom of the page. I have attempted various methods but it seems ...

htmlreactjsbootstrap-4

Using jQuery Chosen to showcase numerous select fields simultaneously within a webpage

I have implemented a search feature using in a dropdown list for user convenience. On the post/create page, I have added 2 tabs: Link & Text Both tabs include a "subreddit_id" field that utilizes $(selector).chosen();. Interestingly, the jQuery chos ...

jqueryhtmllaraveljquery-chosen

Testing Angular Components with setInterval FunctionTrying out unit tests in Angular

I'm struggling to figure out how to write unit tests for setInterval in my .component.ts file. Here is the function I have: startTimer() { this.showResend = false; this.otpError = false; this.time = 60; this.interval = setInterval(() => { this.ti ...

angularunit-testingjasminekarma-jasmine

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

I'm having an issue with my webpage where it doesn't scroll even when the content exceeds the page length. I've tried adjusting the position settings for the body, html, and div elements but haven't seen any changes. Here is the HTML ...

htmlcss

Enhance your Angular experience by adding two new columns to your JSONArray table

I am faced with a JSON-Array dilemma. Array(8) 0: (3) ["Test", "1", "222"] 1: (3) ["Test", "2", "333"] 2: (3) ["Test", "3", "444"] 3: (3) ["Test", "4", "555"] 4: (3) ["Test", "5", "666"] 5: (3) ["Test", "6", "777"] 6: (3) ["Test", "7", "888"] I want to t ...

jsonangular

I seem to be encountering a z-index dilemma

Is there a way to make my slogan float above an image on a wide screen? I've tried adjusting the z-index without success. You can find the site here: Here is the CSS code: The #Slogan contains the words: Fitness Bike Guides - Top Models - Discount ...

css

Having trouble with NPM install freezing during package installations?

Hello, I am currently facing an issue with my project. It works perfectly fine, but the problem arises when I try to move the project files (except node_modules) to another folder or GitHub. The reinstallation of packages via npm always gets stuck at: ex ...

angularnpmrxjsnpm-installnpm-scripts

Guide to building a web service API using Angular 8

Seeking assistance on creating a web service API in Angular 8. As a newbie in Angular 8, I am currently engaged in a project based on Angular 8. Any guidance is greatly appreciated. Access from POSTMAN => api ...

angularapiserviceangular8

HTML inputs do not account for the flex-basis CSS property

For some odd reason, inputs seem to be having trouble interpreting flex-basis correctly. Here's a basic example showcasing how inputs don't follow the rules and extend beyond their parent block (check out this JSFiddle): <div> <inpu ...

htmlcssflexboxhtml-input

Encountered an issue while trying to access a property that is undefined in the

How can I extract data from a dropdown menu and display it in a text box? For instance, if a user selects an ID from the dropdown, I want to show the corresponding name in the textbox. I hope this explanation is clear and properly conveyed, as my English s ...

angular