Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 09:55
    darress commented #35410
  • 09:54
    pkozlowski-opensource labeled #35668
  • 09:52
    darress commented #35602
  • 09:50
    crisbeto unassigned #35673
  • 09:50
    devversion closed #30586
  • 09:50
    devversion commented #30586
  • 09:50
    darress commented #35602
  • 09:48
    darress commented #35410
  • 09:45
    xxxble starred angular/angular
  • 09:44
    darress edited #35602
  • 09:43
    darress commented #35602
  • 09:41
    shlomiassaf commented #35677
  • 09:37
    abdulkareemnalband commented #34549
  • 09:37
    MichaelBrimer commented #6827
  • 09:36
    shlomiassaf commented #35677
  • 09:36
    abdulkareemnalband commented #34549
  • 09:35
    shlomiassaf commented #35677
  • 09:30
    kaichen87 starred angular/angular
  • 09:28
    ngbot[bot] milestoned #35685
  • 09:28
    ngbot[bot] milestoned #35685
DrewMoody
@DrewMoody
@power-amin sounds like maybe this is what you're looking for? https://stackblitz.com/edit/rxjs-djyy4k
David Heredia Tartajo
@dherediat97
hey, someone know if angular have a pipe for \n \n in large texts?
Joe
@foxjazz
when doing an *ngFor is there a way to show the index?
index
Joe
@foxjazz
cool Eric... but why is the input not being populated here?
<div>
  this is the container view
  <ul>
    <li *ngFor="let h of list; let i = index">
      <app-sprowview [blaster]="h.siblings" [rowNumber]="i"></app-sprowview>
    </li>
  </ul>
</div>
Kevin Yanuk
@fugwenna
is index as i any different from let i = index
Joe
@foxjazz
there are 3 rows, yet the input directive is not coming
Kevin Yanuk
@fugwenna
what input directive @foxjazz
rowNumber ?
Joe
@foxjazz
yes
 @Input() blaster(sib: spdata[]) {
    this.siblings = sib;
  }
  @Input() rowNumber(r: number){
    this.row = r;
  }
<div>
  row view {{row}}
  <ul>
    <li *ngFor="let data of siblings">
      sib:
      <app-data [setdata]="data"></app-data>
    </li>
  </ul>
</div>
Kevin Yanuk
@fugwenna
is that intended to be a setter?
Joe
@foxjazz
yes, is that my problem
Kevin Yanuk
@fugwenna
@Input() set rowNumber(r: number) {...}
Joe
@foxjazz
ij
thanks much too much coding in c# not enough coding in angular recently
Kevin Yanuk
@fugwenna
I know the feeling :)
choubani amir
@amirensit
Any idea what is the purpose behind using PreloadAllModules strategy in comparison with eager loading ?
Joe
@foxjazz
yea, I think I am getting my chops back, but after I turn over this code, its back to other stuff
if I had my druthers I would have angular use in instead of of for *ngfor hahhahah
Eric
@sliceofbytes
@fugwenna I believe the as index is the preferred way now
Kevin Yanuk
@fugwenna
gotcha
Damien Retzinger
@damienwebdev
So.... just a general question, how many people have issues with scrolling with the Material Sidenav?
I think its almost everyone -- most people have to hack around the ViewportScroller in some way, right?
Eric
@sliceofbytes
@damienwebdev yup
Damien Retzinger
@damienwebdev
So.. I fixed it.
fugwenna @fugwenna gasps
Damien Retzinger
@damienwebdev
I just don't know the proper way to get this merged
Eric
@sliceofbytes
@amirensit will preload lazy loaded modules in the background
Kevin Yanuk
@fugwenna
i don't even use material so ignore me
Eric
@sliceofbytes
so when user navigates to a lazy loaded route the module is already loaded
Damien Retzinger
@damienwebdev
@Injectable({
  providedIn: 'root',
  useFactory: (document, window, handler: ErrorHandler) => new ShopScrollerService(
    document, 
    document.querySelector('.mat-sidenav-content'), 
    handler
  ),
  deps: [DOCUMENT, ErrorHandler]
})
export class ShopScrollerService implements ViewportScroller {

  private offset: () => [number, number] = () => [0, 0];

  constructor(private document: Document, private window: any, private errorHandler: ErrorHandler) {
    setTimeout(() => {
      this.window = document.querySelector('.mat-sidenav-content');
    }, 1000)
  }

  /**
   * Configures the top offset used when scrolling to an anchor.
   * @param offset A position in screen coordinates (a tuple with x and y values)
   * or a function that returns the top offset position.
   *
   */
  setOffset(offset: [number, number]|(() => [number, number])): void {
    if (Array.isArray(offset)) {
      this.offset = () => offset;
    } else {
      this.offset = offset;
    }
  }

  /**
   * Retrieves the current scroll position.
   * @returns The position in screen coordinates.
   */
  getScrollPosition(): [number, number] {
    if (this.supportScrollRestoration() && this.window instanceof Window) {
      return [this.window.scrollX, this.window.scrollY];
    } 
    else if(this.supportScrollRestoration() && this.window instanceof HTMLElement){
      return [this.window.scrollLeft, this.window.scrollTop]
    }
    else {
      return [0, 0];
    }
  }

  /**
   * Sets the scroll position.
   * @param position The new position in screen coordinates.
   */
  scrollToPosition(position: [number, number]): void {
    if (this.supportScrollRestoration()) {
      this.window.scrollTo(position[0], position[1]);
    }
  }

  /**
   * Scrolls to an anchor element.
   * @param anchor The ID of the anchor element.
   */
  scrollToAnchor(anchor: string): void {
    if (this.supportScrollRestoration()) {
      // Escape anything passed to `querySelector` as it can throw errors and stop the application
      // from working if invalid values are passed.
      if (this.window.CSS && this.window.CSS.escape) {
        anchor = this.window.CSS.escape(anchor);
      } else {
        anchor = anchor.replace(/(\"|\'\ |:|\.|\[|\]|,|=)/g, '\\$1');
      }
      try {
        const elSelectedById = this.document.querySelector(`#${anchor}`);
        if (elSelectedById) {
          this.scrollToElement(elSelectedById);
          return;
        }
        const elSelectedByName = this.document.querySelector(`[name='${anchor}']`);
        if (elSelectedByName) {
          this.scrollToElement(elSelectedByName);
          return;
        }
      } catch (e) {
        this.errorHandler.handleError(e);
      }
    }
  }

  /**
   * Disables automatic scroll restoration provided by the browser.
   */
  setHistoryScrollRestoration(scrollRestoration: 'auto'|'manual'): void {
    if (this.supportScrollRestoration()) {
      const history = this.window.history;
      if (history && history.scrollRestoration) {
        history.scrollRestoration = scrollRestoration;
      }
    }
  }

  private scrollToElement(el: any): void {
    const rect = el.getBoundingClientRect();
    const left = rect.left + this.window.pageXOffset;
    const top = rect.top + this.window.pageYOffset;
    const offset = this.offset();
    this.window.scrollTo(left - offset[0], top - offset[1]);
  }

  /**
   * We only support scroll restoration when we can get a hold of window.
   * This means that we do not support this behavior when running in a web worker.
   *
   * Lifting this restriction right now would require more changes in the dom adapter.
   * Since webworkers aren't widely used, we will lift it once RouterScroller is
   * battle-tested.
   */
  private supportScrollRestoration(): boolean {
    try {
      return !!this.window && !!this.window.scrollTo;
    } catch {
      return false;
    }
  }
}
So, obviously, this has problems. I'd need a better way to resolve the scrolling element in question.
But, this would provide a backwards-compatible solution which allows for more than just Window to be scrolled.
I'd need to add a token that could be resolved to the element in question (either Window or MyElement)
Segi
@SegiH
My app uses Angular Router. I've got a data service https://pastebin.com/Aifu8Ga3 and this is my app.module.ts: https://pastebin.com/LNmdCzTn I want to store allRoutes ,which is my router configuration, inside of the data service but I have an issue with importing it inside of app.module. Is there a way to import RouterModule.forRoot in the imports and access the route defined in the data service ?
Damien Retzinger
@damienwebdev
Then all you'd have to do is simply override the key:
providers: [
    { provide: ViewportScrollerRef, useExisting: MyScrollerRef}
  ]
I think that API is fairly clean, I'm just not 100% certain on how exactly to resolve the elementref in question. The setTimeout i laid out above is just a bad hack I threw together.
Because, if I'm not mistaken the router's scroll event triggers after ngAfterViewInit
Eric
@sliceofbytes
Ya other then the setTimeout it looks pretty nice, I'll have some more time to read it over later
@SegiH looks like just a static array, just import it
@damienwebdev I've actually ended up using ng-sidebar for a couple projects just cause of weirdness with the mat-sidebar
Segi
@SegiH
do you mean the allRoutes defined in the service ?
Eric
@sliceofbytes
@SegiH yes
Segi
@SegiH
i dont want to do that
I want that inside of the data service and I want to ideally remove that other defiition
what I'd like to do is have allRoutes be part of the data service