Utilizing PrimeNG's p-dataView feature without repetitive FieldSets

Currently, I am utilizing p-dataView and I'm interested in implementing p-fieldset based on the application type. My goal is to prevent the fieldset from being duplicated when multiple instances occur. The scenario below illustrates one such case; however, there will be multiple occurrences of fieldsSet. I am uncertain about the most effective method to achieve this. Essentially, I want to group specific rows under a single fieldset.

For example:

<p-dataView [value]="someobject" [paginator]="true" [rows]="20">

    <ng-template let-prev let-rowIndexValue="rowIndex" pTemplate="listItem">

        <div class="container">
            <div class="row">
                <p-fieldset class="fieldset-auto-width" *ngIf="prev.app_type == 10">
                <p-header style="width:30px">Apps</p-header>
                    <div class="col-md-3">
                        <input type="checkbox" id="cbPreviewID" checked name="cbxPreview" (click)="togglePreviewApp($event,rowIndexValue)" style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px" [value]='prev.app_id'> {{prev.app_name}}
                    </div>

                    <div *ngIf="prev.roles.length>1" class="col-md-3" style="margin-right:5px;margin-bottom:10px;margin-left:5px; margin-top:10px">

                    <b>Role:</b> 
                    <select name="role" (ngModelChange)="selectedPreviewAppRole($event,rowIndexValue)" class="dropdown" style="width:85%" required [(ngModel)]="prev.seletedAppRoleID">
                        <option class="dropdown-item" value="" selected>Select</option>
                        <option class="dropdown-item" *ngFor='let role of prev.roles' [ngValue]="role.app_role_id">
                            {{role.app_role_name}}
                        </option>
                    </select>

                </p-fieldset>
            </div>  
        </div>                      
    </ng-template>                      
</p-dataView>

The goal is to have test 1 & 2 grouped under a single field set because their (prev.app_type == 10).

Current Output: https://i.stack.imgur.com/nZiiq.jpg

Desired Outcome: https://i.stack.imgur.com/cqStN.jpg

angulartypescriptprimengprimeng-datatable

Answer №1

https://i.stack.imgur.com/4rbZQ.pngImplemented p-fieldset inside p-dataview successfully. The issue may lie within the *ngIf condition.

Component:

cars = [{
    id: 1,
    items: [{
      name: 'car1',
      description: 'this is car1 description'
    },{
      name: 'car2',
      description: 'this is car2 description'
    },{
      name: 'car3',
      description: 'this is car3 description'
    },{
      name: 'car4',
      description: 'this is car4 description'
    },{
      name: 'car5',
      description: 'this is car5 description'
    }]

}];

Template:

<p-dataView [value]="cars" [paginator]="true" [rows]="5">
  <p-header>List of Cars</p-header>
  <p-footer>Choose from the list.</p-footer>
  <ng-template let-car pTemplate="listItem">
      <p-fieldset legend="Header" *ngIf="car.id === 1" [toggleable]="true">
          <div *ngFor="let _car of car.items">
              {{_car.name}} - {{_car.description}}
          </div>
      </p-fieldset>
  </ng-template>
</p-dataView>

Check out the provided image for reference.

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

Converting numbers to strings based on locale in React Native

I have a quantity that, when using the amount.toFixed() function, produces the string "100.00". I would like this result to be formatted according to the specific locale. For example, in Italian the desired output is 100,00, while in English it should be ...

javascripttypescriptreact-nativelocale

Manipulate inherited CSS styles from an external source

Currently, I am working on creating a pagination using the NG-Bootstrap pagination component. However, I encountered an issue where I need to modify or specifically remove some CSS properties that are applied by default in the NG-Bootstrap library. Is ther ...

htmlcssangularbootstrap-4

What causes data to be emitted sporadically by a subject?

We are seeking your input. Within the constructor of the component, there is code that listens for the mode which enables the isReportMode$ report from the service. However, upon switching to another component and returning back, the isReportMode$ variab ...

angularrxjs

Using Typescript and react-redux with a Stateful Component: The parameter type 'typeof MyClass' does not match the expected component type

I've been trying to dive into the world of Typescript, React, and Redux. However, I've hit a roadblock at the moment. This is the error I encountered: ./src/containers/Hello.tsx [tsl] ERROR in /home/marc/Development/TypeScript-React-Starte ...

javascriptreactjstypescriptreduxreact-redux

A guide on transforming JSON data to an array format where nested arrays are encapsulated within objects using curly braces instead of square brackets in TypeScript

Retrieve data from a REST API in the following format: { "ProductID":1, "Category":[ { "CategoryID":1, "SubCategory":[ { "SubCategoryID":1, } ] } ] } I need to t ...

jsonangulartypescriptkendo-uikendo-ui-angular2

Showing Information without NgFor Directives

I have successfully displayed data without using a ngFor loop. However, it is currently showing all the quote information from multiple customers. The CSS is arranged in such a way that the discount div is positioned next to the customerinfo div. Below is ...

htmlangulartypescript

Angular Service Worker: 504 error encountered during application deployment refresh

After building my Angular 8 project with ng build --prod, I serve it from the /dist folder using http-server. The app still works even after stopping it thanks to the service worker. The project successfully registers its service worker and I am able to ...

angularprogressive-web-appsangular-service-workerngsw-config

Warning: Installing packages with names containing "esbuild-" using npm may

After upgrading my Angular version from 10 to 12 using the steps provided at https://update.angular.io/?l=3&v=10.0-12.0, I successfully completed every step. However, upon running npm install, I encountered the following warnings: npm WARN optional SKI ...

angularnpmnpm-install

Incorporate a background image into mat-dialog

I've been struggling to set a background image on my mat-dialog, but for some reason it's not showing up at all. I attempted using a panelClass as well, but still no luck. .custom-panel .mat-dialog-container { background-image: url("../. ...

angulartypescriptangular-materialmat-dialog

The Angular 2 and TypeScript error stating that the argument of type response is not assignable is causing issues

In my Angular application, I have a service that includes a value defined as: private client_comments = new BehaviorSubject([]); When attempting to update this value with the response from an HTTP request, I encountered the following error message: A ...

angulartypescripthttp

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

cssangular

The powerful combination of harp.gl and Angular NG

We've integrated harp.gl into our ng Angular application, but we're encountering issues when trying to connect to data sources that previously worked in our yarn demo. The datasource is created as follows: const dataSource = new OmvDataSour ...

angulartypescriptharp.gl

Utilizing String.Format in TypeScript similar to C# syntax

Is there a way to achieve similar functionality to String.Format in C# using TypeScript? I'm thinking of creating a string like this: url = "path/{0}/{1}/data.xml" where I can substitute {0} and {1} based on the logic. While I can manually replace ...

typescript

What is the best way to add an external .js file to my Angular 2 application?

I'm currently working on a project using Angular 2's TypeScript API along with webpack to develop a web application. However, I've encountered an issue where one of my components needs to utilize functions from an external .js file that is p ...

google-app-engineangulartypescript

Error TS2322: Type 'boolean' cannot be assigned to type 'undefined'. What is the best approach for dynamically assigning optional properties?

I am currently working on defining an interface named ParsedArguments to assign properties to an object, and here is what it looks like: import {Rules} from "../Rules/types/Rules"; export interface ParsedArguments { //other props //... ...

javascripttypescripttypechecking

React Native: Once a user has successfully logged in, I would like the app to automatically direct them to the "Home" screen

After a user signs in, I would like my app to navigate home. However, it seems this is not working because the roots have not been updated. You can view the App code here to get a better understanding of what I am trying to communicate. What is the most e ...

javascriptreactjstypescriptreact-nativemobile

Using PersistedModel.create(Array) will generate an object containing properties that are numbered sequentially

Here is a piece of code that makes a call to a Loopback API method with an array of values. The input data is correct, no errors are thrown by the API, and the subscribe block executes as expected. const newStudentGroups = selectedStudentI ...

typescriptloopbackjsangular-loopback

Resolving CORS Origin Error in Angular: A Step-by-Step Guide

I am encountering an issue with my angular app. Whenever I try to use the POST, PUT, and DELETE methods, I receive the following error message: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://dev-*** ...

angular

Mapping HTTP responses to a Model in Angular 6

I'm currently looking into how I can effortlessly assign an http response to a specific model in Angular. My goal is to "push" the response into my model class, where only the properties defined in the model are assigned, ignoring all others. For ex ...

angularhttpclient

Retrieving the previous and current URL in Angular 8

Need help setting variables prevUrl and currentUrl in Angular 8 by fetching previous and current URLs. The scenario involves two components - StudentComponent and HelloComponent. When transitioning from HelloComponent to StudentComponent, I face an issue. ...

angular