anz ver 8.1.0 angular/.net core
I added the following code to topbar.component.html
<div id="kt_shopping_cart" class="kt-header__topbar-item">
<div class="kt-header__topbar-wrapper">
<span class="kt-header__topbar-icon kt-header__topbar-icon--brand" (click)="onTopbarShoppingCart()">
<span *ngIf="shoppingCartItemCount > 0; else elseCount">
<i class="fas fa-shopping-cart"></i>
<span class="top-badge">
{{shoppingCartItemCount}}
</span>
</span>
<ng-template #elseCount>
<i class="far fa-shopping-cart"></i>
</ng-template>
</span>
</div>
</div>
and this to topbar.compoent.ts
shoppingCartItemCount: number;
updateShoppingItemCount(itemCount: number) {
this.shoppingCartItemCount = itemCount;
}
If I call the update function from topbar's ngOnInit() the correct value is shown
this.updateShoppingItemCount(4);
However, if I call the update function anytime after the topbar is created, the updated count does not appear. I have tried dozens of "solutions" published on various blogs, to no avail. What is an effective method of updating the topbar menu to cause the view to repaint?
6 Answer(s)
-
0
Hi @timmackey It looks like it should work. Can you please provide a project that contains that problem. (I could not reproduce it)
-
0
I'm injecting TopBarComponent and DefaultLayoutComponent into my app page:
constructor( injector: Injector, private _hostSettingService: HostSettingsServiceProxy, private _activatedRoute: ActivatedRoute, private _topBarComponent: TopBarComponent, private _defaultLayoutComponent: DefaultLayoutComponent, ) { super(injector); this._topBarComponent.setTtmDashboardComponent(this); this._defaultLayoutComponent.setTtmDashboardComponent(this); }DefaultLayoutComponent constructor and ngOnInit are each called once, and the shopping cart is updated as expected. TopBarComponent constructor is called twice and ngOnInit is called one, and the shopping cart is NOT updated. It appears that the injected TopBarComponent is the second instance which has not called ngOnInit.
I will send my app to [email protected] for analysis.
-
0
project files emailed to [email protected]
-
0
Hi @timmackey
Thanks, we got the project this time and will check it.
Thanks,
-
0
Wondering if any progress has been made in determining a solution?
-
0
The aforementioned code to add a shopping cart icon to TopBarComponent and DefaultLayoutComponent has been abandoned in favor of adding an additional toolbar to my custom form, as follows:
<div id="ttm_dashboard_toolbar" class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor"> <div class="kt-subheader kt-grid__item"> <div class="kt-container"> <div class="kt-subheader__main"> </div> <div class="kt-subheader__toolbar"> <div id="kt_shopping_cart" class="kt-header__topbar-item dropdown"> <div class="kt-header__topbar-wrapper ttm-shopping-cart" pTooltip={{shopping_cart_tooltip}} tooltipPosition="left"> <a routerLink="/app/main/ttm-page_7" [queryParams]="{menuId: 7, frameId: 'fiFrameId_ShoppingCart'}"> <span class="kt-header__topbar-icon kt-header__topbar-icon--brand" (click)="onShoppingCartClick()"> <div *ngIf="shoppingCartItemCount > 0; else elseCount"> <i class="fas fa-shopping-cart fa-2x"></i> <span class="kt-badge kt-badge--primary ttm-shopping-cart-badge"> {{shoppingCartItemCount}} </span> </div> </span> <ng-template #elseCount> <i class="far fa-shopping-cart fa-2x"></i> </ng-template> </a> </div> </div> </div> </div> </div> </div>
While the above solution does consume vertical real estate, it does work, and solves the problem of the shopping cart icon showing up inappropriately in host and tenant admin pages.
