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

See also questions close to this topic

• TS2304: Cannot find name 'stripe'

  I'm attempting to create an Angular Stripe component following this tutorial. It says to create typings.d.ts (Created it in the root directoy) with the content:

  declare var stripe: any;
  declare var elements: any;
  

  SO that's done, and stripe is included via script element in index.html, however when attempting to compile I still get these message:

      ERROR in src/app/stripe/stripe.component.ts:26:17 - error TS2552: Cannot find name 'elements'. Did you mean 'Element'?
  
      26     this.card = elements.create('card');
                      ~~~~~~~~
  
      node_modules/typescript/lib/lib.dom.d.ts:5063:13
          5063 declare var Element: {
                          ~~~~~~~
          'Element' is declared here.
      src/app/stripe/stripe.component.ts:47:36 - error TS2304: Cannot find name 'stripe'.
  
      47     const { token, error } = await stripe.createToken(this.card);
  

  VSCode is not painting any red lines.

  Thoughts?
• How do i write an NgRx 8 Effect that triggers an action from a promise

  I am struggling to grasp NgRx Effects.

  Using the latest release, version 8, i have written the following effect which combines the observable with a promise and am struggling to grasp how to write it correctly.

  Is this guaranteed to catch all possible errors?

  authLogin$ = createEffect(() => this.actions$.pipe(
      ofType(AuthActions.authLogin),
      switchMap(async(action) => {
        try {
          const userState = await this.loginService.login(action.username, action.password);
          return AuthActions.authSuccess(userState);
        }
        catch (error) {
          return AuthActions.authLoginError({
            error: error
          });
        }
      })
    ),{ resubscribeOnError: false });
  

  I am also not clear on whether or not i should be using the last bit of this configuration: { resubscribeOnError: false } Does this mean subsequent execution will create an entirely new observable?

  Is there a better approach?
• How can I make crossdomain image being displayed on my Angular page?

  I have a part of code in my template that intended to be a link for downloading a Flash player as it was in simple static websites. What I should to do in Angular with part to make it loading from the origin website?

   <a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" crossorigin="anonymous" alt="Get Adobe Flash player" /></a>
  
• How to resolve angular library build issue

  I am trying to create angular library and pack.When i use img tag inside my angular library i am getting below error on running time. I have used this code to build library with converting images to base64[script.js].

  script.js

       const dataUri = require('datauri').sync;
       const replace = require('replace-in-file');
  
       const replaceOptions = {
       // Files to search. For now, we need HTML and CSS
       files: ['./dist/example-ng6-lib/**/*.js', './dist/example-ng6-lib/**/*.ts'],
       // Don't search inside these folders / files
       ignore: [],
  
           // Search for URLs using this Regex. It supports "./" prefix and the 
         png / jpg files
  
        from: /\.\/|assets.*\.(png|jpg)/gm,
        // Replace the match with the Base64 value using dataUri
        to: match => { return match === './' ? '': dataUri(match) },
       };
  
       replace(replaceOptions)
       .then(results => {
       console.log('Replacement results:', results);
       })
       .catch(error => {
       console.error('Error occurred:', error);
       });
  

  C:\xampp\htdocs\Angular\example-ng6-lib\projects\example-ng6-lib\src\lib\example-ng6-lib.component.ts

       import { Component, OnInit } from '@angular/core';
  
       @Component({
       selector: 'enl-example-ng6-lib',
       template: `
       <p>
        example-ng6-lib works!
       </p>  
       <img src="https://5.imimg.com/data5/QS/TF/MY-39133330/jasmine-grandiflorum-500x500.jpg" width="500" height="250">
        `,
        styles: [] 
        })
        export class ExampleNg6LibComponent implements OnInit {
  
        constructor() { }
  
       ngOnInit() {
       }
  
       }
  

  ng build example-ng6-lib && node script.js

  ng serve --open

       ERROR in node_modules/example-ng6-lib/example-ng-lib.d.ts:4:15 - 
       error TS2307: 
       Cannot find module 'public-api'. 
  
       export * from 'public-api'; 
       src/app/app.module.ts:3:10 - error TS2305: Module 
       '"C:/xampp/htdocs/angular/mist/node_modules/example-ng6-lib/example- 
       ng6-lib"' has no exported member 'ExampleNgLib6Module'. 
       import { ExampleNg6LibModule } from 'example-ng6-lib';
  

  How to resolve this issue?
• How to create angular library and package

  I am trying to create angular library and package like tgz file format using below commands.

  ng generate library example-ng-lib --prefix=enl
  ng build example-ng-lib && node script.js
  npm pack
  

  but not working properly.I can not find the solution.If you want more info I will explain you clearly. Anyone can find the mistake from my command? please help to resolve this issue.
• Error: Getting public-api not found module in angular 6

  I have developed one angular library and packed using below commands:

  ng generate library example-ng6-lib --prefix=enl
  ng build example-ng6-lib && node script.js
  npm pack
  

  C:\xampp\htdocs\angular\mist\projects\example-ng6-lib\src\public-api.ts

  /*
  * Public API Surface of example-ng6-lib
  */
  
   export * from './lib/example-ng6-lib.service';
   export * from './lib/example-ng6-lib.component';
   export * from './lib/example-ng6-lib.module';
  

  but If i run using ng serve I am getting this error:

  ERROR in node_modules/example-ng6-lib/example-ng6-lib.d.ts:4:15 - error 
  TS2307: Cannot find module 'public-api'.
  
  4 export * from 'public-api';
  
  src/app/app.module.ts:3:10 - error TS2305: Module 
  '"C:/xampp/htdocs/angular/mist/node_modules/example-ng6-lib/example-ng6- 
  lib"' has no exported member 'ExampleNg6LibModule'.
  
  3 import { ExampleNg6LibModule } from 'example-ng6-lib';
  

  How to resolve this issue?
• Error when using Angular mat-tree with cdkDropList and virtual scroll

  Im trying to create a tree component that will have drag and drop feature, but also virtual-scroll because we need to support large amount of data.

  I followed 2 articles in order to solve it, and tried to combined the 2 solutions:

  • how to implement drag-and-drop with Angular material tree link

  • how to implement virtual scroll on an Angular material tree link

  in short, I first took the "drag-and-drop" code example and on top of it I added the virtual scroll HTML, and the data for the tree is sliced each time the view is rendered.

  Please see my test app here.

  the problem is that sometimes I get the following error when I drag an item:

  Cannot read property '_getSiblingContainerFromPosition' of undefined

  

  the error seems to appear when dragging an item right after the page loaded, but usually when I try again to drag the same item, the drag works with no errors.

  I found a few answers for similar error in different scenarios that state that we need to call the Angular detectChanges() after each time I change the tree data source, but it didn't solve the problem.

  any help would be appreciated.
• CDK Infinite scroll end checking

  im trying to implement infinite scroll for loading items on to the list dynamically when user scrolls down the list, but when i access the end and total , it is coming as same, i need to check if the last item is reached and then append new items to the list. the problem is both end and total are same and gets triggered everytime

  HTML

  <cdk-virtual-scroll-viewport style="height: 300px" itemSize="5" (scrolledIndexChange)="nextBatch($event)">
    <li *cdkVirtualFor="let row of auditDetails; let j=index;" style="height: 100px;  box-shadow: 0 1px 1px black;">{{j}}</li>
  </cdk-virtual-scroll-viewport>
  

  TS

  auditDetails = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
  
  @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;
  
  ngAfterViewInit() { }
  
  nextBatch(currIndex: number, items: any[]) {
    const start = this.viewPort.getRenderedRange().start;
    const end = this.viewPort.getRenderedRange().end;
    const total = this.viewPort.getDataLength();
    console.log(`end is ${end} total is ${total}`)
    if (end == total) {
      console.log("end reached increase page no")
    }
  }
  
  trackByIdx(i: number) {
    return i;
  }
  

  Stackblitz link https://stackblitz.com/edit/cdk-infinite-scroll-ufuewv