Angular 쿼리 빌더 구성 요소 개요
Angular Query Builder는 Angular Components의 일부이며 개발자가 지정된 데이터 세트에 대한 복잡한 데이터 필터링 쿼리를 작성할 수 있는 풍부한 UI를 제공합니다. 이 구성 요소를 사용하면 표현식 트리를 구축하고 각 필드의 데이터 유형에 따라 결정되는 편집기 및 조건 목록을 사용하여 표현식 사이에 AND/OR 조건을 설정할 수 있습니다. 그런 다음 식 트리는 백엔드가 지원하는 형식의 쿼리로 쉽게 변환될 수 있습니다.
IgxQueryBuilderComponent 구성 요소는 UI를 통해 복잡한 쿼리를 작성하는 방법을 제공합니다. AND/OR 연산자, 조건 및 값을 지정하여 사용자는 쿼리를 설명하는 표현식 트리를 만듭니다.
Angular Query Builder Example
Angular Query Builder 구성 요소의 기본 기능을 보여주기 위해 이 Angular Query Builder 예제를 만들었습니다. 더하기 버튼을 클릭하면 조건, "and" 그룹 및 "or" 그룹을 추가할 수 있습니다. 그룹을 해제하거나 삭제하려면 사이드 바를 탐색하세요.
Getting Started with Ignite UI for Angular Query Builder
Ignite UI for Angular 쿼리 빌더 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.
ng add igniteui-angular
Ignite UI for Angular에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.
다음 단계는 IgxQueryBuilderModule에서 app.module.ts 파일.
// app.module.ts
import { IgxQueryBuilderModule } from 'igniteui-angular';
// import { IgxQueryBuilderModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxQueryBuilderModule],
...
})
export class AppModule {}
또는 16.0.0부터 IgxQueryBuilderComponent 독립형 종속성으로 가져오거나 IGX_QUERY_BUILDER_DIRECTIVES 토큰을 사용하여 구성 요소와 모든 지원 구성 요소 및 지시문을 가져올 수 있습니다.
// home.component.ts
import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from 'igniteui-angular';
// import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-query-builder #queryBuilder
[fields]="fields"
[(expressionTree)]="expressionTree"
(expressionTreeChange)="onExpressionTreeChange()">
</igx-query-builder>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_QUERY_BUILDER_DIRECTIVES]
/* or imports: [IgxQueryBuilderComponent] */
})
export class HomeComponent {
public expressionTree: FilteringExpressionsTree;
public fields: FieldType [];
public onExpressionTreeChange() {
...
}
}
이제 Ignite UI for Angular 가져왔으므로 igx-query-builder 구성 요소 사용을 시작할 수 있습니다.
Using the Angular Query Builder
처음에 식 트리가 설정되지 않은 경우 AND 또는 OR로 연결된 조건 그룹을 만드는 것부터 시작합니다. 그 후에 조건이나 하위 그룹을 추가할 수 있습니다.
조건, 필드, 필드 dataType을 기반으로 하는 피연산자 및 피연산자가 단항이 아닌 경우 값을 추가하려면. 조건이 커밋되면 조건 정보가 포함된 칩이 나타납니다. 칩을 마우스로 가리키거나 클릭하면 칩을 수정하거나 칩 바로 뒤에 다른 조건이나 그룹을 추가할 수 있는 옵션이 제공됩니다.
조건 칩을 두 개 이상 선택하면 그룹을 만들거나 쿼리를 삭제할 수 있는 옵션이 포함된 상황에 맞는 메뉴가 나타납니다. 선택한 조건으로 그룹을 생성하도록 선택한 경우 새로 생성된 그룹은 최상위 선택된 조건이 배치된 위치에 나타납니다.
그룹을 선택하려면 연결 조건(AND 또는 OR)에 따라 색상이 지정된 수직선을 클릭할 수도 있습니다. 단일 그룹을 선택하면 논리 변경, 그룹 해제 또는 삭제 옵션이 포함된 상황에 맞는 메뉴가 표시됩니다.
fields 속성을 필드 이름과 해당 데이터 유형을 설명하는 배열로 설정하여 구성 요소 사용을 시작할 수 있습니다. 데이터 유형에 따라 해당 피연산자를 자동으로 할당합니다. 쿼리 빌더에는 expressionTree 입력 속성이 있습니다. 이를 사용하여 컨트롤의 초기 상태를 설정하고 사용자 지정 필터링 논리에 액세스할 수 있습니다.
ngAfterViewInit(): void {
const tree = new FilteringExpressionsTree(FilteringLogic.And);
tree.filteringOperands.push({
fieldName: 'ID',
condition: IgxStringFilteringOperand.instance().condition('contains'),
searchVal: 'a',
ignoreCase: true
});
const subTree = new FilteringExpressionsTree(FilteringLogic.Or);
subTree.filteringOperands.push({
fieldName: 'ContactTitle',
condition: IgxStringFilteringOperand.instance().condition('doesNotContain'),
searchVal: 'b',
ignoreCase: true
});
subTree.filteringOperands.push({
fieldName: 'CompanyName',
condition: IgxStringFilteringOperand.instance().condition('startsWith'),
searchVal: 'c',
ignoreCase: true
});
tree.filteringOperands.push(subTree);
this.queryBuilder.expressionTree = tree;
}
expressionTree는 최종 사용자가 조건을 생성, 편집 또는 제거하여 UI를 변경할 때 내보내는 해당 expressionTreeChange 출력이 구현됨을 의미하는 양방향 바인딩 가능 속성입니다. 알림을 받고 이러한 변경 사항에 대응하기 위해 별도로 구독할 수도 있습니다.
<igx-query-builder #queryBuilder
[fields]="fields"
[(expressionTree)]="expressionTree"
(expressionTreeChange)="onExpressionTreeChange()">
</igx-query-builder>
스타일링
쿼리 빌더 스타일 지정을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
쿼리 작성기는 background 매개변수를 사용하여 테마에서 배경색을 가져옵니다. 배경을 변경하려면 사용자 정의 테마를 만들어야 합니다.
$custom-query-builder: query-builder-theme(
$background: #FFCD0F
);
쿼리 빌더 내부에는 버튼, 칩, 드롭다운, 입력과 같은 다른 구성 요소가 있으므로 각 구성 요소에 대해 별도의 테마를 만들어야 합니다.
$custom-button: button-theme(
$disabled-color: gray,
...
);
$custom-button-group: button-group-theme(
$item-background: #292826,
...
);
$custom-input-group: input-group-theme(
$box-background: #4a4a4a,
...
);
$custom-chip: chip-theme(
$background: #FFCD0F,
...
);
$custom-drop-down: drop-down-theme(
$background-color: #292826,
...
);
이 예에서는 나열된 구성요소에 대한 매개변수 중 일부만 변경했지만, button-theme, button-group-theme, chip-theme, drop-down-theme, input-group-theme 테마는 해당 요소를 제어할 수 있는 훨씬 더 많은 매개변수를 제공합니다. 각자의 스타일링.
마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다. 또한 쿼리 빌더 내부의 다른 요소에 대한 몇 가지 스타일을 추가할 것입니다.
@include query-builder($custom-query-builder);
igx-query-builder {
@include button($custom-button);
@include button-group($custom-button-group);
@include input-group($custom-input-group);
@include chip($custom-chip);
@include drop-down($custom-drop-down);
.igx-filter-empty__title {
color: #FFCD0F
}
.igx-query-builder__header {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon:hover {
color: #ffe482
}
.igx-filter-tree__expression-actions igx-icon:focus {
color: #ffe482
}
.igx-filter-contextual-menu {
border: 1px solid #FFCD0F
}
.igx-filter-contextual-menu__close-btn {
position: absolute !important;
background: #292826 !important;
border-color: #FFCD0F !important;
}
.igx-input-group__input::placeholder {
color: gray;
}
}
Note
igx-query-builder 내에서 대부분의 구성 요소 믹스인 범위를 지정하므로 이러한 사용자 정의 테마는 쿼리 빌더에 중첩된 구성 요소에만 영향을 미칩니다. 그렇지 않으면 애플리케이션의 다른 버튼, 칩, 입력 및 드롭다운도 영향을 받습니다.
Note
구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.
:host {
::ng-deep {
@include drop-down($custom-drop-down);
@include query-builder($custom-query-builder);
igx-query-builder {
@include button($custom-button);
@include button-group($custom-button-group);
@include input-group($custom-input-group);
@include chip($custom-chip);
.igx-input-group__input::placeholder {
color: gray;
}
.igx-filter-empty__title {
color: #FFCD0F
}
.igx-query-builder__header {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon {
color: #FFCD0F
}
.igx-filter-tree__expression-actions igx-icon:hover {
color: #ffe482
}
.igx-filter-tree__expression-actions igx-icon:focus {
color: #ffe482
}
.igx-filter-contextual-menu {
border: 1px solid #FFCD0F
}
.igx-filter-contextual-menu__close-btn {
position: absolute !important;
background: #292826 !important;
border-color: #FFCD0F !important;
}
}
}
}
Defining a color palette
방금 했던 것처럼 색상 값을 하드코딩하는 대신 igx-palette 및 igx-color 기능을 사용하면 색상 측면에서 더 큰 유연성을 얻을 수 있습니다.
igx-palette 전달된 기본 색상과 보조 색상을 기반으로 색상 팔레트를 생성합니다.
$yellow-color: #FFCD0F;
$black-color: #292826;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);
그런 다음 igx-color 사용하면 팔레트에서 색상을 쉽게 검색할 수 있습니다.
$custom-query-builder: query-builder-theme(
$background: color($dark-palette, "secondary", 400)
);
$custom-button: button-theme(
$disabled-color: color($dark-palette, "secondary", 100),
...
);
$custom-button-group: button-group-theme(
$item-background: color($dark-palette, "secondary", 400),
...
);
$custom-input-group: input-group-theme(
$box-background: color($dark-palette, "secondary", 200),
...
);
$custom-chip: chip-theme(
$background: color($dark-palette, "primary", 400),
...
);
$custom-drop-down: drop-down-theme(
$background-color: color($dark-palette, "secondary", 400),
...
);
Note
igx-color 및 igx-palette 색상을 생성하고 검색하는 강력한 기능입니다. 사용 방법에 대한 자세한 지침은 Palettes 항목을 참조하세요.
Using Schemas
테마 엔진을 사용하면 스키마의 이점을 활용하는 강력하고 유연한 구조를 구축할 수 있습니다. 스키마는 테마의 레시피입니다.
모든 구성요소(이 경우 light-query-builder, light-button, light-button-group, light-chip, light-input-group 및 light-drop-down 대해 제공되는 사전 정의된 두 스키마 중 하나를 확장합니다. 스키마:
$query-builder-dark-palette: palette($primary: #11bd7b, $secondary: #e32057, $info: $black-color);
$custom-query-builder-schema: extend($_light-query-builder,
(
background:(
color: ("info")
)
)
);
$custom-button-schema: extend($_light-button,
(
disabled-color:(
color: ("secondary", 100)
),
...
)
);
$custom-button-group-schema: extend($_light-button-group,
(
item-background:(
color: ("secondary", 400)
),
...
)
);
$custom-input-group-schema: extend($_light-input-group,
(
box-background:(
color: ("secondary", 200)
),
...
)
);
$custom-chip-schema: extend($_light-chip,
(
background:(
color: ("primary", 400)
),
...
)
);
$custom-drop-down-schema: extend($_light-drop-down,
(
background-color:(
color: ("secondary", 400)
),
...
)
);
사용자 정의 스키마를 적용하려면 다음을 수행해야 합니다. 연장하다 전역 변수 중 하나(light 또는 dark)는 기본적으로 사용자 정의 스키마를 사용하여 구성 요소를 지적한 후 해당 구성 요소 테마에 추가합니다.
$custom-light-schema: extend($light-schema,(
igx-query-builder: $custom-query-builder-schema,
igx-button: $custom-button-schema,
igx-button-group: $custom-button-group-schema,
igx-input-group: $custom-input-group-schema,
igx-chip: $custom-chip-schema,
igx-drop-down: $custom-drop-down-schema
));
$custom-query-builder: query-builder-theme(
$palette: $query-builder-dark-palette,
$schema: $custom-light-schema
);
$custom-button: button-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-button-group: button-group-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-input-group: input-group-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-chip: chip-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
$custom-drop-down: drop-down-theme(
$palette: $dark-palette,
$schema: $custom-light-schema
);
위에서 설명한 것과 동일한 방식으로 테마를 포함하는 것을 잊지 마십시오.
Demo
Note
샘플은 Change Theme에서 선택한 전역 테마의 영향을 받지 않습니다.
실제 UI 구성 요소가 포함된 WYSIWYG App Builder ™를 사용하여 Angular 앱 개발을 간소화할 수도 있습니다.
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub