Tips for effectively utilizing tabs to showcase information for a particular user rather than solely the initial one

I am fetching multiple user data from an API call, and all users are rendered using the same HTML and CSS. However, when I switch between tabs for each user, only the first user's information changes instead of the specific user I clicked on. I have attempted to interpolate the user ID but it has had no effect. Here is the code snippet:

<div *ngFor="let user of users" class="container emp-profile">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="true">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="company-tab" data-toggle="tab" href="#company" role="tab" aria-controls="company" aria-selected="false">Company</a>
    </li>
  </ul>

<div class="row">
  <div class="col-md-4">
  </div>
  <div class="col-md-8">
    <div class="tab-content profile-tab" id="myTabContent">
      <div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
htmlcssangular

Answer №1

It is important to avoid assigning static ids to HTML elements when working with *ngFor in Angular. Using static ids can result in multiple HTML elements sharing the same id, causing confusion for elements like <a> tags which may not know where to navigate. This can lead to only the first user being affected by changes.

To address this issue, Angular allows for the use of dynamic ids:

<div [id]="'my-tab-' + user.name"></div> // id === 'my-tab-user1'

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

Leveraging object imported from interface

I have a question regarding Angular/TypeScript. It may seem obvious, but I would like clarification. What I'm doing is creating an interface and exporting it: export interface MainObject { location: string; methodType: string; securityLevel: st ...

angulartypescript

Characters from Font Awesome are invisible on my screen

I am struggling with the font awesome plugin as I am unable to view the characters. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <l ...

cssfont-awesome

CSS transitions that smoothly adjust with min-width media queries

In my design, there is a sidebar navigation that collapses to make room for more content in a flex layout. When the user triggers the collapse action, the content area div .ca expands to fill the space, and the flex layout adjusts using media queries. To ...

htmljquerycssflexboxcss-transitions

Customizing the size of the selectInput widget in R/Shiny

I'm trying to adjust the size of the selectInput() widget in shiny using selectize.js. I've attempted to tweak various attributes listed on this page (https://github.com/selectize/selectize.js/blob/master/dist/css/selectize.css) but I can't ...

javascriptcssrshiny

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

A problem is occurring with the ng-class directive in this HTML code, which is generating seats using the ng-repeat directive. The colors are not being added properly when a seat is selected. If you'd like to view my code, it can be found in this JSf ...

cssangularjsangularjs-ng-repeatng-class

When a div is created outside of the viewport, the overflow scroll feature will fail to function properly

I am currently working on developing a full screen slider with a unique feature on the last slide: a horizontal scrolling area. To achieve a smooth animation, I am using CSS translations to bring the div within the viewport. Oddly enough, the scrollbar do ...

javascripthtmlcssscrolltransition

Navigating through different routes in an Angular application can be tricky, especially when dealing

I am facing an issue with the navigation links in my sidebar, which are located within a child module named "login". When I click on "Classroom", it correctly directs me to "login/classroom". However, when I click on "Assignments", it appends "assignment ...

angulartypescriptroutesangular8url-routing

Enhancing the appearance of standard HTML checkboxes

This HTML snippet displays a pair of checkboxes positioned side by side <div id="mr_mrs"> <ul class="mr_mrs form-no-clear"> <li id="mr" class="popular-category"> <label for="Mr" id="mr">Mr</label> ...

htmlcss

creating styles for css elements using equations

I am curious about defining CSS element dimensions before they are rendered without using offset and jQuery. Is it possible to echo PHP into the width/height or position values? For example: <?php $width = 290px; $altwidth = 290; ?> <style> ...

javascriptphpjquerycssposition

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

htmlcss

Why isn't the Angular2 ngIf directive updating the DOM?

I am encountering issues with finding the right expression for ngIf to evaluate properly. After following a basic Angularfire2 example, I have successfully managed to log in and out. import { Component } from '@angular/core'; import { AngularFi ...

angularangularfire2

"Adjusting the size of a jQuery dialog for optimal viewing on

I am currently working on designing an HTML page that is responsive for both mobile and desktop browsers. One issue I am encountering involves a jQuery dialog that I need to scale properly to fit the page. I believe the problem lies within these lines of ...

jqueryhtmlcss

When the click event is triggered, the second function guess() does not execute

I am currently developing a number guessing application. It consists of two functions, the first one called startGame() works correctly (it receives the maximum number and then disappears by adding the hidden class). However, the second function that is ...

javascripthtmlfunctionevent-handlingmouseclick-event

Make sure the webpage remains fixed in place when the modal is active, but ensure that the scrollbar is still visible

My goal is to prevent page scrolling when a modal is opened without causing the scrollbar to disappear or the content to shift abruptly. I want to freeze the scroll position I'm currently at, keep the scrollbar visible, and ensure that features like & ...

htmlcssvue.jsvuejs3modal-dialog

What is the best way to categorize items in Angular lists based on their type

Lately, I've been delving into Angular and I'm facing a challenge - I want to split a list into two based on their type and display them in separate fields. My main query is: can I achieve this by using a for loop in the .ts file, or is there a s ...

htmlangulartypescript

Guide on updating a table with query parameters in Html Agility Pack using C#

Struggling with parsing this URL using the Html Agility Pack: " The default table that shows up is always based on the closest contract date and the current date. I can parse the entire page without any issues, but when I try to request a different date ...

htmlhtml-parsinghtml-agility-pack

Tips for presenting random images from an assortment of pictures on a webpage

I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...

javascripthtmlcssangular

Transforming an HTML5 game into a native mobile application

I'm currently working on creating a HTML5 game. While I find HTML5 to be the most user-friendly programming language, I am facing an issue. I want my game to run as a native application on desktops (Windows, Mac, and Linux) rather than in a web browse ...

javascripthtmlnative

Tips for obtaining files and videos from Google Drive utilizing Angular 6/7

Trying to integrate Google Drive with my Angular 7 application for the first time. I am looking to download a video file from Google Drive and play it in my Angular Application. After extensive research, I haven't found a solution yet. Can someone pro ...

angularangular7

Database query results displayed in a vertical scroll block

I'm facing an issue with the placement of a DIV tag on my page. I have a large number of rows being returned from a database query, and I can't seem to get the DIV tag in the right location. When I put the DIV tag outside the while loop, it appea ...

phphtmlmysqlcss