@ -25,26 +25,21 @@ The ABP Checkbox Component is a reusable form input component for the checkbox t
# Usage
The ABP Checkbox component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, there's no need to import it again. If not, then first import it as shown below:
The ABP Checkbox component (`AbpCheckboxComponent`) is a standalone component. You can import it directly in your component:
```ts
// my-feature.module.ts
import { ThemeSharedModule } from "@abp/ng.theme.shared";
import { CheckboxDemoComponent } from "./CheckboxDemoComponent.component";
@NgModule({
imports: [
ThemeSharedModule,
// ...
],
declarations: [CheckboxDemoComponent],
// ...
import { Component } from "@angular/core";
import { AbpCheckboxComponent } from "@abp/ng.theme.shared";
@Component({
selector: 'app-checkbox-demo',
imports: [AbpCheckboxComponent],
templateUrl: './checkbox-demo.component.html',
})
export class MyFeatureModule {}
export class CheckboxDemoComponent {}
```
Then, the `abp-checkbox` component can be used. See the example below:
Then, the `abp-checkbox` component can be used in your template. See the example below:
@ -22,23 +22,21 @@ The ABP FormInput Component is a reusable form input component for the text type
# Usage
The ABP FormInput component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, there's no need to import it again. If not, then first import it as shown below:
The ABP FormInput component (`AbpFormInputComponent`) is a standalone component. You can import it directly in your component:
```ts
import { ThemeSharedModule } from "@abp/ng.theme.shared";
import { FormInputDemoComponent } from "./FomrInputDemoComponent.component";
@NgModule({
imports: [
ThemeSharedModule,
// ...
],
declarations: [FormInputDemoComponent],
import { Component } from "@angular/core";
import { AbpFormInputComponent } from "@abp/ng.theme.shared";
@Component({
selector: 'app-form-input-demo',
imports: [AbpFormInputComponent],
templateUrl: './form-input-demo.component.html',
})
export class MyFeatureModule {}
export class FormInputDemoComponent {}
```
Then, the `abp-form-input` component can be used. See the example below:
Then, the `abp-form-input` component can be used in your template. See the example below:
Additional UI extensibility points ([Entity action extensions](../angular/entity-action-extensions.md), [data table column extensions](../angular/data-table-column-extensions.md), [page toolbar extensions](../angular/page-toolbar-extensions.md) and others) are used in ABP pages to allow to control entity actions, table columns and page toolbar of a page. If you replace a page, you need to apply some configurations to be able to work extension components in your component. Let's see how to do this by replacing the roles page.
Create a new module called `MyRolesModule`:
```bash
yarn ng generate module my-roles --module app
```
Create a new component called `MyRolesComponent`:
```bash
yarn ng generate component my-roles/my-roles --flat --export
yarn ng generate component my-roles/my-roles --flat
```
Open the generated `src/app/my-roles/my-roles.component.ts` file and replace its content with the following:
```js
import { Component, Injector, inject, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
import { finalize } from 'rxjs/operators';
import { ListService, PagedAndSortedResultRequestDto, PagedResultDto } from '@abp/ng.core';
import { ListService, PagedAndSortedResultRequestDto, PagedResultDto, LocalizationPipe } from '@abp/ng.core';
import { eIdentityComponents, RolesComponent } from '@abp/ng.identity';
import { IdentityRoleDto, IdentityRoleService } from '@abp/ng.identity/proxy';
import { ePermissionManagementComponents } from '@abp/ng.permission-management';
import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
import { ePermissionManagementComponents, PermissionManagementComponent } from '@abp/ng.permission-management';
import { Confirmation, ConfirmationService, ModalComponent, ButtonComponent } from '@abp/ng.theme.shared';
import {
EXTENSIONS_IDENTIFIER,
FormPropData,
generateFormFromProps
generateFormFromProps,
PageToolbarComponent,
ExtensibleTableComponent,
ExtensibleFormComponent
} from '@abp/ng.components/extensible';
@Component({
selector: 'app-my-roles',
imports: [
ReactiveFormsModule,
LocalizationPipe,
ModalComponent,
ButtonComponent,
PageToolbarComponent,
ExtensibleTableComponent,
ExtensibleFormComponent,
PermissionManagementComponent
],
templateUrl: './my-roles.component.html',
providers: [
ListService,
@ -236,25 +243,12 @@ Open the generated `src/app/my-role/my-role.component.html` file and replace its
We have added the `abp-page-toolbar`, `abp-extensible-table`, and `abp-extensible-form` extension components to template of the `MyRolesComponent`.
You should import the required modules for the `MyRolesComponent` to `MyRolesModule`. Open the `src/my-roles/my-roles.module.ts` file and replace the content with the following:
```js
import { ExtensibleModule } from '@abp/ng.components/extensible';
import { NgModule } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { MyRolesComponent } from './my-roles.component';
import { PermissionManagementModule } from '@abp/ng.permission-management';
As the last step, it is needs to be replaced the `RolesComponent` with the `MyRolesComponent`. Open the `app.component.ts` and modify its content as shown below:
"Description": "Learn how to set up your development environment for ABP Angular 17.3.x with this quick start guide, ensuring a smooth development experience."
"Description": "Learn how to set up your development environment for ABP Angular 21.x with this quick start guide, ensuring a smooth development experience."
}
```
# ABP Angular Quick Start
**In this version ABP uses Angular [20.0.x](https://github.com/angular/angular/tree/20.0.x) version. You don't have to install Angular CLI globally**
**In this version ABP uses Angular [21.0.x](https://github.com/angular/angular/tree/21.0.x) version. You don't have to install Angular CLI globally**
## How to Prepare Development Environment
@ -18,13 +18,13 @@ Please follow the steps below to prepare your development environment for Angula
3. **[Optional] Install VS Code:** [VS Code](https://code.visualstudio.com/) is a free, open-source IDE which works seamlessly with TypeScript. Although you can use any IDE including Visual Studio or Rider, VS Code will most likely deliver the best developer experience when it comes to Angular projects. ABP project templates even contain plugin recommendations for VS Code users, which VS Code will ask you to install when you open the Angular project folder. Here is a list of recommended extensions:
- [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template)
sumeyye
4 months ago
GitHub