Activities of "armanozak"

Hi @buaziz,

Is this issue resolved? Can we close it?

Thanks.

Hi @talhazengin,

Has this issue been resolved? Can we close it?

Thanks. Have a nice day.

Hi,

Example usage:

import { IdentityService } from '@volo/abp.ng.identity';

@Component({
  template: `
    <pre><code>{{ usersResponse$ | async | json }}</code></pre>
  `
})
export class UsersComponent {
  usersResponse$ = this.identityService.getUsers({ maxResultCount: 10, sorting: 'surname asc' });

  constructor(private identityService: IdentityService) {}
}

Considering it is resolved, I am closing the issue.

I wish you a beautiful day.

Hi,

Many components on login page are replaceable. Please refer to following document for replaceable components.

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#how-to-replace-a-component

Here is an example:

import { AddReplaceableComponent } from '@abp/ng.core';
import { Component } from '@angular/core';
import { Store } from '@ngxs/store';
import { eAccountComponents } from '@volo/abp.ng.account';

@Component({
  template: `
    <div class="text-center mb-4"><code>LOGO IS REPLACEABLE</code></div>
  `,
})
class CustomLogoComponent {}

@Component({
  template: `
    <div class="text-center my-3"><code>TENANT-BOX IS REPLACEABLE</code></div>
  `,
})
class CustomTenantBoxComponent {}

@Component({
  template: `
    <div class="text-center"><code>LOGIN FORM IS REPLACEABLE</code></div>
  `,
})
class CustomLoginComponent {}

@Component({
  selector: 'app-root',
  template: `
    <abp-loader-bar></abp-loader-bar>
    <abp-dynamic-layout></abp-dynamic-layout>
  `,
})
export class AppComponent {
  constructor(store: Store) {
    store.dispatch(
      new AddReplaceableComponent({
        component: CustomLogoComponent,
        key: eAccountComponents.Logo,
      }),
    );
    store.dispatch(
      new AddReplaceableComponent({
        component: CustomTenantBoxComponent,
        key: eAccountComponents.TenantBox,
      }),
    );
    store.dispatch(
      new AddReplaceableComponent({
        component: CustomLoginComponent,
        key: eAccountComponents.Login,
      }),
    );
  }
}

An the output looks like this:

You can also replace the layout via the eThemeLeptonComponents.AccountLayout key, which is exported from @volo/abp.ng.theme.lepton. You may even replace the AccountComponent with your own implementation. The replaceable component key is eAccountComponents.Account.

Please let me know if this answers you question.

Have a nice day.

Hi,

Those services are exported from the @volo/abp.ng.identity package. You can import and use them in your app as follows:

import { IdentityService, OrganizationUnitService } from '@volo/abp.ng.identity';

You do not have to (and actually should not) provide them in your module or your component metadata, because they are providedIn: 'root'.

Please let me know if this answers your question.

Have a nice day.

Hi vishalnikam,

Thanks for your inquiry.

Before v3, there was no way to change these without component replacement as described here:

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#how-to-replace-navitemscomponent

However, as of v3, we have introduced NavItemsService which can be used to replace only the current user component:

https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu#how-to-patch-or-remove-an-right-part-element

So, if you can upgrade to the latest version, you may replace only that component. Please see the migration guide for details:

https://docs.abp.io/en/abp/latest/UI/Angular/Migration-Guide-v3

In order to make it easier for you, here is the latest CurrentUserComponent source code:

import {
  ApplicationConfiguration,
  AuthService,
  ConfigState,
  SessionState,
  ABP,
} from '@abp/ng.core';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Select } from '@ngxs/store';
import { Observable } from 'rxjs';
import { eThemeLeptonComponents } from '../../enums/components';

@Component({
  selector: 'abp-current-user',
  // tslint:disable-next-line: component-max-inline-declarations
  templateUrl: 'current-user.component.html',
})
export class CurrentUserComponent implements OnInit {
  @Select(ConfigState.getOne('currentUser'))
  currentUser$: Observable<ApplicationConfiguration.CurrentUser>;

  @Select(SessionState.getTenant)
  selectedTenant$: Observable<ABP.BasicItem>;

  currentUserImageComponentKey = eThemeLeptonComponents.CurrentUserImage;

  get smallScreen(): boolean {
    return window.innerWidth < 992;
  }

  constructor(private authService: AuthService, private router: Router) {}

  ngOnInit() {}

  logout() {
    this.authService.logout().subscribe(() => {
      this.router.navigate(['/'], { state: { redirectUrl: this.router.url } });
    });
  }
}

...and its template:

<ng-container *ngIf="currentUser$ | async as user">
  <ng-template #loginBtn>
    <a role="button" routerLink="/account/login" class="btn ">{{
      'AbpAccount::Login' | abpLocalization
    }}</a>
  </ng-template>
  <div *ngIf="user.isAuthenticated; else loginBtn" class="dropdown btn-group" ngbDropdown>
    <a ngbDropdownToggle class="btn pointer">
      <abp-current-user-image
        *abpReplaceableTemplate="{
          componentKey: currentUserImageComponentKey,
          inputs: { currentUser: { value: user }, classes: { value: 'user-avatar' } }
        }"
        [currentUser]="user"
        classes="user-avatar"
      ></abp-current-user-image>
      <span class="d-lg-none ml-1">
        <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
          ><i>{{ tenantName }}</i></small
        >
        <span>{{ user.userName }}</span>
      </span>
    </a>
    <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
      <div class="p-2 row">
        <div class="pr-0 col col-auto">
          <abp-current-user-image
            *abpReplaceableTemplate="{
              componentKey: currentUserImageComponentKey,
              inputs: { currentUser: { value: user }, classes: { value: 'user-avatar-big' } }
            }"
            [currentUser]="user"
            classes="user-avatar-big"
          ></abp-current-user-image>
        </div>
        <div class="pl-2 col">
          <span>{{ 'AbpAccount::Welcome' | abpLocalization }}</span
          ><br />
          <small *ngIf="(selectedTenant$ | async)?.name as tenantName"
            ><i>{{ tenantName }}</i></small
          >
          <strong>{{ user.userName }}</strong>
        </div>
      </div>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item pointer" routerLink="/account/manage-profile">{{
        'AbpAccount::ManageYourProfile' | abpLocalization
      }}</a>
      <a class="dropdown-item pointer" id="logout" (click)="logout()">{{
        'AbpUi::Logout' | abpLocalization
      }}</a>
    </div>
  </div>
</ng-container>

I hope this answers your question. Please let me know if it does.

Have a nice day.

Hi,

I think https://docs.abp.io/en/abp/latest/Tutorials/Part-1?UI=NG&DB=EF would help. Another tutorial customized for ABP Commercial will be published soon.

I wish you a cheerful day.

Hi,

I have good news for you. As of ABP 3.0, replacing logos are quite simple. Please refer to the migration guide:

https://docs.abp.io/en/abp/latest/UI/Angular/Migration-Guide-v3#lepton-theme-logos-commercial

Have a nice day.

Hi,

Closing this issue due to inactivity. If you need more clarification on this matter, please feel free to reopen it.

Have a beautiful day.

Hi,

Can we close this issue?

Thanks.