Printing in Angular when a value changes is simple and can be achieved by

Looking for a solution to dynamically switch between different departments and list employees within each department as the value changes in Angular. Essentially, I need to display the employees under each department, print the department name when it changes, and continue this pattern until another department change occurs. Is there a way to achieve this in Angular?

It should look something like this...

Department A
Name 1
Name 2
Name 3

Department B
Name 1

Department C
Name 1
Name 2
Name 3
Name 4


<div class="col-12 col-sm-6 col-xl-4 col-3xl-3 mb-4">
    <div class="card">
      <div class="card-body">
        <p class="card-text card-subtle-text ">{{item.DEPARTMENT}}</p>
        <h3 class="card-title card-heading card-title-mark">{{item.NAME}}</h3>
        <span class="card-support">{{item.JOBTITLE}}</span>
        <p class="card-text">{{item.CAMPUS}}</p>
        <p class="card-text"></p>
        <p class="card-text"><strong>Phone: </strong>{{item.PHONE}}</p>
        <p class="card-text"><strong>Email: </strong><span ng-bind-html="item.EMAIL"></span></p>
      </div>
    </div>
</div>

Answer №1

After some troubleshooting, I managed to solve the issue. By implementing an ng-if statement that assessed various values and their changes, I was able to find a solution. Regrettably, I cannot disclose the data due to confidentiality reasons related to my employment at a higher education institution.

Utilizing the syntax "ng-if={item.DEPARTMENT}" allowed me to establish a clear distinction between different departments.

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

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...

SignalR does not include cookies in the connection request

While working on a web application using ASP.NET Web API and SignalR, I encountered an issue that is proving to be quite challenging despite my understanding of HTTP. Currently, I have successfully set a cookie on all AJAX requests to the API, and subsequ ...

What could be causing my form to not display a validation error?

I'm currently working on a task where I need to validate a form and display a message that says 'Please complete the form!' Everything seems to be functioning correctly except for the message. What could I be missing here? How can I make thi ...

React Native undefined check isn't functioning properly

When verifying data such as house number, street, city, etc., I noticed that if the city is undefined. I am wondering why my if statement does not work when trying to check if the city is undefined? ${typeof el.properties.city !== "undefined" ? el.propert ...

Exploring the functionalities of the componentDidUpdate() method in React JS

In my project, I am trying to dynamically change an API parameter using a click function and render new data accordingly. The issue I encountered is that when I trigger the componentDidUpdate method with an onclick event listener, the first click works fin ...

Issue with ThreeJS object's quaternion rotation deviating from expected axis rotation

I am currently working on a project where I need a 3D object to follow a specified path while always facing the direction in which it is moving. To achieve this, I have been using the following code snippet: fishObject.quaternion.setFromAxisAngle(axis, ra ...

Maximizing Code Reusability in Angular: Leveraging Services and Controllers

I am currently using Angular to create a commenting feature for a web application. There are two sections in the app where users can leave comments: Category and Product. Category Product Most of the commenting functionality is the same for both section ...

When the localStorage is empty, populate it with data from a JSON file

const username = document.querySelector("span.username").textContent; if (localStorage.getItem(username) === null) { //user data not found, start setting //localStorage.setItem(username, JSON.stringify(userA)); console.log("localstorage for " ...

JS this, that, and then boggled my mind

Feeling a bit rusty at the moment; I have a few promises remaining that require access to a previous class, and I am striving to find the most elegant solution. Utilizing webdriverJS, this should cover all aspects of the driver... Thank you for your assis ...

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

In the footer class of my HTML, there is a code snippet with chevrons: <div class="link-list"> <div *ngFor="let link of insideLinksLeft | originalOrderKeyValue" class="link"> <a [href]="link.val ...

Every time I hit the refresh button, I find myself forcefully logged out

After switching from using localStorage to cookies in my React JS web app, I am experiencing an issue where I get logged out whenever I refresh the page. Even though the cookies are still stored in the browser, the authentication process seems to be failin ...

Creating a custom JavaScript clock based on stored database values

I am looking to create an analog clock using JavaScript. I have both working hours and off hours stored in a database. My goal is to display working hours in one color and off hours in another color on the clock. How can I achieve this? The database prov ...

Having trouble printing a section of a webpage after making CSS adjustments

When trying to print part of a page, I used the following method. It successfully prints that portion of the page, however, it does not preserve the CSS effects. <body> <h1><b><center>This is a test page for printing</center&g ...

Deleting a Form using Jquery Post Submission (JSP and Servlet)

Is there a way to submit multiple forms using Jquery and remove them from the list after submission? Here's an example of my JSP code: <form action="searchTweet" method="post"> <textarea name="searchTxt"></textarea> <inpu ...

How can I retrieve the selected value from an Angular 2 dropdown menu when it changes, in order to utilize it within a function?

I am currently working on creating a dropdown menu with multiple options. When a user selects an option, I need to make an API call that requires an ID parameter. Inside my component.ts file, I have defined an array containing the values like this: valu ...

Create new states on the fly with ui-router dynamically during runtime

I am interested in using ui-router to create a dynamic navigation system that can assemble pages in a unique and changing sequence. Instead of hardcoding the ui-sref attribute for each "next" button on the templates, I want the routing to be determined by ...

Top tip for incorporating a streamlined domain name search feature using an ajax form

Is there a script available that can quickly search for domain names through whois and check their availability? It would be great if this script could make an ajax call. Thank you! ...

Displaying a timer output in an HTML div every second using PHP

I created a custom PHP countdown timer that displays the remaining time in hours, minutes, and seconds (specifically 3 hours) - named countdown.php. The timer output is displayed within a <div> tag on another page called index.html. Now, I am lookin ...

Code containing insertAdjacentHTML() does not run as expected due to injection of script

I have a scenario in my application where I am sending a request from the client to a node.js server. The server responds with an HTML containing a script: app.post('/verify', cors(issue2options), async (req, res) => { let auth = await mon ...

Mapping with Angular involves iterating over each element in an array and applying a function to each one

I am working with an API that provides data in a specific format: {"data": [ { path: "some path", site_link: "link", features: ['feature1', 'feature2'] } ... ]} Now, I have a service called getSites() ge ...