Just an update, I was using ngif instead of ngIf (note capital I), after changing it to capital I, I don't receive error but menu is still not displayed, even though it contains the data. I don't know if menu is displayed this way after ngOnInit, there may be a different way of re-rendering i.e calling some method etc. I am not be sure though, can you think of anything else, as it seems like a common functionality?
@musa.demir Thank you for your reply.
When I add *ngif="menu", I received the below error.
`
<div [class]="'aside-menu-wrapper aside-menu-' + currentTheme.baseSettings.menu.asideSkin" id="kt_aside_menu_wrapper" *ngif="menu">
<div #asideMenu ktMenu [options]="menuOptions" [perfectScrollbar]="{wheelPropagation: false}"
[ngStyle]="{'max-height': '90vh', 'position': 'relative'}" id="kt_aside_menu" class="aside-menu scroll"
[attr.data-menu-vertical]="1" [attr.data-menu-scroll]="ui.getIsMenuScrollable() ? 1 : 0"
[attr.data-menu-dropdown]="ui.isSubmenuToggleDropdown() ? 1 : 0" (mouseenter)="mouseEnter($event)"
(mouseleave)="mouseLeave($event)" [class]="ui.getLeftAsideClass()">
<ul class="menu-nav">
<li class="menu-item mb-5" aria-haspopup="true"
data-ktmenu-submenu-toggle="hover" *ngIf="currentTheme.baseSettings.menu.searchActive">
<menu-search-bar></menu-search-bar>
</li>
<ng-container [ngTemplateOutlet]="menuListTemplate"></ng-container>
</ul>
</div>
</div>
<!-- END: Aside Menu -->`
Yes, this.menu contains data when event is fired, please see below the console output.
There must be a way of re-rendering menu.
What is your product version? 10 Latest
What is your product type (Angular or MVC)? ASP.net Core and Angular
What is product framework type (.net framework or .net core)? .NET5
What is ABP Framework version? The one that comes up with ASP.NET and Angular v10.
I am trying to use dynamic menu on the left hand side. I have searched your support side and tried to utilise what other people have done but I am struggling to implement it. This is what I have done so far:
Declared a global variable in app-navigation-service.ts.
myAppMenu: AppMenu = new AppMenu('MainMenu', 'MainMenu', []);
I am calling my web api to get the menu from the server in getMenu() function of app-navigation-service.ts
getMenu(): AppMenu {
this._myMenuService.getAllGrantedMenus(1, 1, 2)
.subscribe(result => {
console.log(result);
this.myAppMenu = result;
abp.event.trigger('myMenuLoaded', this.myAppMenu);
});
return this.myAppMenu;
}
In side-bar-menu.component.ts I am registering the event and your code is being used to call getMenu() function. The code is shown below.
ngOnInit() {
this.menuLoaded();
this.menu = this._appNavigationService.getMenu();
this.currentRouteUrl = this.router.url.split(/[?#]/)[0];
this.router.events
.pipe(filter((event) => event instanceof NavigationEnd))
.subscribe(
(event) =>
(this.currentRouteUrl = this.router.url.split(/[?#]/)[0])
);
}
menuLoaded(): void {
abp.event.on('myMenuLoaded', function (menu) {
console.log("EVENT IS FIRED");
console.log(menu);
this.menu = menu;
});
}
The above event is fired, but the menu is blank. I guess it is because the html and angular templates are executed before the menu data is returned. I am struggling to re-render the menu as it should be re-rendered when event is fired. Can you please help?
@ismcagdas, are there any built-in methods in ASPNETZero that you use for using LocalStorageService?
What is your product version? 10 Latest
What is your product type (Angular or MVC)? ASP.net Core and Angular
What is product framework type (.net framework or .net core)? .NET5
What is ABP Framework version? The one that comes up with ASP.NET and Angular v10.
Our application has a home page, where we display a list of records. When user selects a record, and move to another link (via the left hand menu), the system gets and shows the data for that particular record. There are many menus and each menu opens up a form which shows the data for the selected record. In our MVC/jquery version, we use session to store the Id of the selected record, and when user moves between the pages we track that Id and return the data for the selected record only.
What is the best way to achieve the above behaviour in AspNetCore and Angular version? Is there a way that we store the RecordId on the client side and it gets send automatically to the server side App Service? Do you have a example code to help?
Thanks
I upgraded to the latest node version 14.15.1 and the error has disappeared.
Could you still confirm the correct way for changing port number (in case I am overdoing the changes) as I am sharing a remote desktop environment with a colleague and we both needs to run the system at the same time so we can't use the same port?
What is your product version? 10 Latest What is your product type (Angular or MVC)? ASP.net Core and Angular What is product framework type (.net framework or .net core)? .NET5 What is ABP Framework version? The one that comes up with ASP.NET and Angular v10.
What is the best way for changing ports for ASPNET Core Server project and Angular Project in the development environment? The ports 44301 (Server project) and 4200 (Angular Project) appears in multiple places. I tried to change them in all locations but I receive the errors displayed in the image below.
Can you help?
Thanks, works fine now.
I am upgrading from version 8.0.0.0 to version 10.0.0.0. The code mentioned in the image below works fine on version 8, however I am getting compile time error on version 10. Has something changed on cache retrieval mechanism? I am passing a dto.
The code is the same, as I have copied and pasted the complete file.
Version 8 - Works fine
Version 10 - Compile error
I see from change logs on GitHub that methods belonging to CacheExtensions had been removed in March. What should be the alternative in my case, as I need to pass dto to my function?
Please see below the code which works fine on version 8, I need to convert this so that it works fine on version 10, please provide guidance or example code.
public async Task<List<AccommodationTypesListDto>> GetAll(GetFilteredAccommodationTypeInputDto getFilteredAccommodationTypeInputDto)
{
var cacheName = _nebulaCacheManager.GetTenantCacheName(_accommodationTypeCache.CacheName);
var accommodationType = await _cacheManager
.GetCache(cacheName)
.Get(getFilteredAccommodationTypeInputDto, () => GetAllFromDB(getFilteredAccommodationTypeInputDto));
return ObjectMapper.Map<List<AccommodationTypesListDto>>(accommodationType.OrderBy(getFilteredAccommodationTypeInputDto.Sorting));
}
private async Task<List<AccommodationTypesListDto>> GetAllFromDB(GetFilteredAccommodationTypeInputDto getFilteredAccommodationTypeInputDto)
{
var accommodationTypes = await (from accommodationType in _accommodationTypeRepository.GetAll()
.Where(a => a.MyField1 = getFilteredAccommodationTypeInputDto.MyField1 &&
a.MyField2 = getFilteredAccommodationTypeInputDto.MyField2)
select new AccommodationTypesListDto
{
Id = accommodationType.Id,
Text = accommodationType.Text,
DisplayOrder = accommodationType.DisplayOrder,
TenantId = accommodationType.TenantId
}).ToListAsync();
return accommodationTypes;
}
Can you help with example code please?