cdkVirtualFor occupy height and show scroll even if there is single item Angular 6

See also questions close to this topic

• Select option with ngModel

  I have a project that has a select of several questions and I would like the first one to appear by default.

  I have seen an example of how to achieve this using the index, of the type:

  <select>
   <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
    {{answer.name}}
   </option> 
  </select>
  

  and it works, but when I want to bind the select to a property of the component, it is no longer selected:

  <select  [(ngModel)]=searchterms.answerId>
   <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">
    {‌{answer.name}}
   </option> 
  </select>
  

  You can see an example here:

  https://stackblitz.com/edit/angular-rv9vqi
• Custom Selector Names for Angular Material Components

  I am just getting started with angular and angular material and I am not enjoying how each angular-material component begins with mat. For instance:

  <mat-sidenav-container>
    <mat-sidenav>...</mat-sidenav>
    <mat-sidenav-content>...</mat-sidenav-content>
  </mat-sidenav-container>
  

  Is there a way for me to give custom selector names for these components? I.e., something like this:

  <SidenavContainer>
    <Sidenav>...</Sidenav>
    <SidenavContent>...</SidenavContent>      
  </SidenavContainer>
  

  If so, how could I do that?
• How can I get external API proxy for Angular 8 working correctly instead of defaulting to localhost

  I am basically trying to run a dev Angular application so I can write and test services easier for our production NativeScript app.

  It requires an external API and I have tried multiple ways to get around the CORS issue. Many references only state that I have to do the following:

  {
    "/main-feed": {
    "target": "https://endpoint.org",
    "secure": true,
    "logLevel": "info",
    "changeOrigin": true
  }
  

  I have gotten this proxy to work with localhost but for an external api when I hit the final endpoint /main-feed/v1/items it gives me back an error that states:

  GET http://localhost:4200/main-feed/v1/items 404 (Not Found)

  I have tried /main-feed/ and /main-feed/*.

  It would be really great if I could get this working but I understand if Angular is not built for this. I really wish it was easier for development to override CORS but I understand the risk.
• Mock API for e2e Angular2

  I need mock Api for end to end tests. I sow answer but i didn't understand how separate API for view and tests?

  Perhaps is way get api result from json file?
• How to assign declaration name this by programatically in angular7

  Tried to set this declaration variable names but not working. I am passing the declaration variable names by function but I do not know how to assign for that. I have given my code below:

  app.component.ts:

  public mynames1:any =[];
  public mynames2:any =[];
  public mynames3:any =[];
  public mynames4:any =[];
  
  function thisnameassign(thisname,value){
      this.[thisname]=value; // it should be like this.mynames1=12;  if i pass this.thisnameassign("mynames1","12")
      console.log(this.[thisname]); 
  }
  
  this.thisnameassign("mynames1","12");
  this.thisnameassign("mynames2","129");
  this.thisnameassign("mynames3","132");
  this.thisnameassign("mynames4","512");
  
• How to get first column td value from prime ng table in angular 7

  Tried to get first column table td value when click on the first td of each tr.I tried but not working I know how to write in jquery but i do not know how to write in angular 7.If anyone know please help me to find the solution.

  <p-table id="dt" [columns]="cols" [value]="cars" [scrollable]="true" [rows]="10"  [virtualRowHeight]="30" [loading]="loading"
      [virtualScroll]="true" (onLazyLoad)="loadCarsLazy($event)" [lazy]="true" [totalRecords]="totalRecords">
  
      <ng-template pTemplate="header" let-columns>
          <tr>
              <th *ngFor="let col of cols">
                  {{col.header}} 
              </th>
          </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-columns="columns">
          <tr style="height:30px">
              <td *ngFor="let col of cols">
                  {{rowData[col.field]}}
              </td>
          </tr>
      </ng-template>
  </p-table> 
  

  Demo: https://stackblitz.com/edit/p-table-primeng-v6-t1k6ng?file=src/app/app.component.html
• Angular, scrollable like component. Sticky header

  
  I am looking for angular component with horizontal scroll behaviour and:

  
  * possibility to show it whenever i decide to. I mean, normal scroll appears only when css overflow is enabled.
  * emit event, when scroll changes position and scroll position
  * set scroll size - this is kinda important, but not required. I mean, the scroll size need to depend on some data (array of objects) size
  

  Why do i need component like this?

  I am trying to implement sth what will be used to render data based on scroll position. I want to avoid situations like, when I need to render huge amount of columns in table (for example 1000). I cant use paginator. I just need to render only visible part + some buffer. VirtualScroll of cdk, won't work since I do have one in component, you can't place two cdkVirtualFor in one cdk-virtualscroll-viewport.
  Also, is there any table component which supports sticky header and virtual scroll, and which data is not bound with [dataSource] (like Mat-table, Cdk-table)? I found a function which translate object when you scroll, and make the header "sticky", but sometimes when you scrolling upwards, the sticky header is not translated fast enough (it feels like the header is jumping).
  Thanks for any help.
  Regards.
• Image Flickering Issue on Angular Material 8 Virtual Scroll

  Below screens will explain the issue in details. When I am scrolling down it is pushing 2 of my cards to the above row from the last row of the screen. See the highlighted image 1 in the selected row (baby is reading book)

  When I am scrolling down and images loading. Image 2 is the screen after I scroll down and loaded one new row. You can see the image is in 3rd position and 2 more images are loaded newly. This is giving a flickering affect in the screen

  Image 1 is "Image Before scroll"
  Image 2 is "Image after scrolling"

  StackBlitz Demo
  Image Discription
• Implement Angular CDK Virtual Scroll for Clarity datagrid rows

  I want to implement the datarid with the ability to have virtual scrolling. Can we use Angular CDK package for implementing virtual scrolling for Clarity datagrid rows?

  I tried adding CDK Virtual Scroll on the datagrid as same code below:

  <clr-datagrid>
  
    <clr-dg-column>...</clr-dg-column>
  
    <cdk-virtual-scroll-viewport [itemSize]="--" style="height:---px">
  
       <clr-dg-row *cdkVirtualFor="let item of items"> ... </clr-dg-row>
  
    </cdk-virtual-scroll-viewport>
  
  </clr-datagrid>
  
  

  However, nothing rendered on the datagrid (The datagrid shows the empty placeholder). If I remove the CDK virtual scrolling, then the Clarity datagrid works as expected. Do we have any way for this?

  Thanks.