logo
down
shadow

Angular 6: table with *ngIF generates one <td> more than i need


Angular 6: table with *ngIF generates one <td> more than i need

By : Chortle Buffer
Date : October 22 2020, 08:10 PM
will help you Consider combining the
so that you have fewer cells, but they are displayed together:
code :
<tr *ngFor="let item of servicesFiltered; let i = index">
   <td class="values-left">{{ item.scheduleDate | date:'dd/MM/yyyy'}}</td>
   <td class="values-left" *ngIf="!item.customer.name"> - {{ item.customer.name }}</td>
   <td class="values-left" *ngIf="!item.service.name"> - {{item.service.name}}</td>
   <td class="values-left" *ngIf="!item.employee.name && userCheck == true"> - {{item.employee.name}}</td>
   <td class="values-right" *ngIf="!item.value"> - {{item.value | currency:curSymbol}}</td>
   <td class="values-right" *ngIf="!item.comissionValue && userCheck == true"> - {{item.comissionValue | currency:curSymbol}}</td>                  
</tr>
<tr *ngFor="let item of servicesFiltered; let i = index">
   <td class="values-left">{{ item.scheduleDate | date:'dd/MM/yyyy'}}</td>
   <td><ng-container *ngIf="!item.customer.name"> - <ng-container></td> 
   <td class="values-left">{{ item.customer.name }}</td>
   <td><ng-container *ngIf="!item.service.name"> - <ng-container></td>
   <td class="values-left">{{item.service.name}}</td>
   <td><ng-container *ngIf="!item.employee.name"> - <ng-container></td>
   <td><ng-container *ngIf="userCheck == true" class="values-left">{{item.employee.name}}<ng-container></td>
   <td><ng-container *ngIf="!item.value"> - <ng-container></td> 
   <td class="values-right">{{item.value | currency:curSymbol}}</td>
   <td><ng-container *ngIf="!item.comissionValue"> - <ng-container></td> 
   <td><ng-container *ngIf="userCheck == true"  class="values-right">{{item.comissionValue | currency:curSymbol}}<ng-container></td>                  
</tr>


Share : facebook icon twitter icon
Angular 4 : add new td to table with *ngif with modulo in an *ngfor

Angular 4 : add new td to table with *ngif with modulo in an *ngfor


By : Darren Andrei D Logm
Date : March 29 2020, 07:55 AM
I hope this helps . I'm a beginner and I'm using Angular 4.3.2 in my project. I'm trying to make a table which looks like this : (I have 2 arrays : the legend is an enum, and I have items) , All you need is this items.slice(i*4 , (i+1)*4) :
code :
<table>
  <tr *ngFor="let enum of enums;let i = index;">
      <th>{{enum}}</th>
      <ng-container *ngFor="let item of items.slice(i*4 , (i+1)*4)">
          <td>{{item}}</td>
      </ng-container>
  </tr>
</table>
Angular Material: Using *ngIf inside a table

Angular Material: Using *ngIf inside a table


By : kunalpareek
Date : March 29 2020, 07:55 AM
it should still fix some issue I have a mat-table in which I pass some data and build out the table using Angular Material's table component. For some reason when I use *ngif="{{Participant,status != 1}}" to show/hide a button, it errors. , You need to remove the annotation {{}} when you are using *ngIf
code :
 <button *ngIf="Participant.status !== '1'" mat-menu-item>{{1 | participantStatus}}</button>
Angular 6 - Waiting for element to load inside *ngIf on setting ngIf to true

Angular 6 - Waiting for element to load inside *ngIf on setting ngIf to true


By : stratageeks alpha
Date : March 29 2020, 07:55 AM
seems to work fine Try to use hidden, If you use ngIf then it will remove element from DOM
Try this below,
code :
<div class="catalog-menus-subnav-wrapper" [hidden]="!showMenus">
   <div class="hidden-elem">
   </div>
</div>
Angular 2 - ngIf Alternative which does not initialize the component evertime the ngIf value changes

Angular 2 - ngIf Alternative which does not initialize the component evertime the ngIf value changes


By : Alex_python
Date : March 29 2020, 07:55 AM
hop of those help? You can use [hidden] instead of *ngIf.
In contrary to *ngIf, hidden doesn't completely remove content from the DOM, it just... well, hides it ;)
Can I put an ngIf else condition on a Angular Material table?

Can I put an ngIf else condition on a Angular Material table?


By : user3032327
Date : March 29 2020, 07:55 AM
seems to work fine I've followed the Angular docs here https://angular.io/api/common/NgIf to create an NgIf else conditional over my Material Table. It is reading remote JSON file as API. , Try
code :
    <ng-container matColumnDef="replies">
      <th mat-header-cell *matHeaderCellDef> Replies </th>
      <ng-container *matCellDef="let hashtags">
        <td mat-cell *ngIf="(hashtags.replies>0); else noReplies"> {{hashtags.replies}} </td>
      </ng-container>
      <ng-template #noReplies>-</ng-template>
    </ng-container>
Related Posts Related Posts :
  • jQuery target next of the same class in the whole DOM
  • encoding must be a valid encoding error in process encoding
  • How to do a date range to view data from selected date highcharts
  • How do I refactor this composed function with Ramda.js?
  • jQuery to serialize selected option's value, not label
  • Convert object to Chartis.js structure
  • Dynamic import with not bundled file
  • Click handler not firing for elements rendered in Ajax Callback - only in Safari
  • Math.max.apply gives an error CreateListFromArrayLike called on non-object
  • get the parent nodes to a given node in d3 dendogram
  • is-dropdown-submenu-parent makes links unclickable on Opera and Chrome
  • JS: Sum column values and updating result on change
  • Query against nested object keys
  • Fullcalendar getting its parent colspan
  • How to retrieve a dynamic number of elements by id
  • How to access redux variables and functions from deep components
  • Efficiently access Array.prorotype.filter single-item returns
  • PHP var into Javascript
  • How to parse json with javascript/jquery if content matches string
  • How can I make a pyramid based on alphabet?
  • Javascript sorting a csv rows and displaying in table
  • How to get specific data from json from api using ajax. The json looks strange to me
  • react js html5 video not working
  • Javascript Angular 4 Change ngClass from another Component
  • Hide multiple table columns with javascript
  • Convert datetime to ISO Format using moment js
  • Dynamically adjust canvas size depending on content
  • setTimeout function with document on click
  • Need advice on nested Promises.all
  • Google Captcha expiration time
  • Syntax of Javascript TAPE unit test
  • Parse php json to javascript
  • Write to Internet Explorer javascript console with vba in excel
  • 2 Forms with Jquery
  • Why the loop stops right in the middle?
  • filter system for restaurant booking
  • how to add active class in framework nav menu when (add/edit) pages are opened
  • Port a js map in dart
  • How to get value from select using javascript
  • Audio won't be muted with JavaScript - removing audio tags with mutationobserver needed
  • How to include an HTML/Javascript game into reactJS website
  • Convert Nodejs server into node module
  • Strage Vue behaviour. V-if does not watch properly
  • Is it possible to use map/filter/reduce inside a promise by returning the result with Promise.resolve?
  • Does EcmaScript have any rule where whitespace is important for the compiler during parsing
  • How is DOM and Virtual DOM represented in memory?
  • cannot display text onchange select option
  • My gulpfile can edit (change) and delete file, but dont copy new (add) files
  • How do I reset scroll position of paper-dialog-scrollable?
  • Loading unlooped gif-animation several times
  • Strange error from Google API: initializeAutocomplete is not a function
  • Array state variable is not being set during componentWillMount
  • Stop refresh on form submit when using javascript
  • Npm WARN deprecated babel-preset-es2015@6.24.1: Thanks for using Babel: we recommend using babel-preset-env now: please
  • Cant get wheel scroll delta on Firefox
  • Puppeteer with Prompt, ignoring rest of function
  • VueJS Form Input Binding
  • How To Extend mail.Chatter Widget in Javascript Odoo 10
  • How Chk two checkboxes at a time using jQuery
  • Broken "if" statement in JavaScript code…
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org