fix(breadcrumbs): fix rendering issues on load (#2239)

Teradata · Sep 6, 2024 · 744f1e0 · 744f1e0
1 parent e827ffc
commit 744f1e0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss b/libs/angular/breadcrumbs/src/breadcrumb/breadcrumb.component.scss
@@ -5,7 +5,7 @@
  flex-direction: row;
  align-items: center;
  align-content: center;
- max-width: 100%;
+ flex-shrink: 0;
  justify-content: flex-end;
 
  ::ng-deep > * {

diff --git a/libs/angular/breadcrumbs/src/breadcrumbs.component.ts b/libs/angular/breadcrumbs/src/breadcrumbs.component.ts
@@ -10,6 +10,7 @@ import {
  ElementRef,
  Input,
  HostBinding,
+ AfterViewInit,
 } from '@angular/core';
 
 import { fromEvent, Subject } from 'rxjs';
@@ -24,7 +25,7 @@ import { TdBreadcrumbComponent } from './breadcrumb/breadcrumb.component';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TdBreadcrumbsComponent
- implements OnInit, AfterContentInit, OnDestroy
+ implements OnInit, AfterContentInit, AfterViewInit, OnDestroy
 {
  private _resizing = false;
  private _separatorIcon = 'chevron_right';
@@ -69,12 +70,17 @@ export class TdBreadcrumbsComponent
  });
  }
 
+ ngAfterViewInit(): void {
+ this._waitToCalculateVisibility();
+ }
+
  ngAfterContentInit(): void {
  // Note: doesn't need to unsubscribe since `QueryList.changes`
  // gets completed by Angular when the view is destroyed.
  this._breadcrumbs.changes
  .pipe(startWith(this._breadcrumbs))
  .subscribe(() => {
+ this._waitToCalculateVisibility();
  this.setCrumbIcons();
  this._changeDetectorRef.markForCheck();
  });
@@ -156,4 +162,10 @@ export class TdBreadcrumbsComponent
  this.hiddenBreadcrumbs = hiddenCrumbs;
  this._changeDetectorRef.markForCheck();
  }
+
+ private _waitToCalculateVisibility(): void {
+ setTimeout(() => {
+ this._calculateVisibility();
+ });
+ }
 }