mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
ACS-8198 add injection to component data
This commit is contained in:
committed by
Darya Blavanovich
parent
d8634c901a
commit
f1fab8700a
@@ -79,6 +79,30 @@ function openDialog() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
To use dialog with provided component as a content `componentData` should be passed as data parameter. Inside component `DIALOG_COMPONENT_DATA` should be injected.
|
||||||
|
|
||||||
|
```ts
|
||||||
|
//...
|
||||||
|
|
||||||
|
function openDialog() {
|
||||||
|
const data: DialogData = {
|
||||||
|
title: 'Dialog title',
|
||||||
|
contentComponent: ExampleDialogComponent,
|
||||||
|
componentData: { nodeId: 'nodeId', name: 'node name' } // any data can be passed
|
||||||
|
};
|
||||||
|
|
||||||
|
this.dialog.open(DialogComponent, { data });
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
in `ExampleDialogComponent`:
|
||||||
|
```ts
|
||||||
|
export class ManageHoldsDialogComponent {
|
||||||
|
inputs = inject(DIALOG_COMPONENT_DATA); // inputs = { nodeId: 'nodeId', name: 'node name' }
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
Note that **fixed width** may be provided which will work correctly on smaller screens. But don't specify any values for **height**, as this may break the scrollable content and hide the buttons.
|
Note that **fixed width** may be provided which will work correctly on smaller screens. But don't specify any values for **height**, as this may break the scrollable content and hide the buttons.
|
||||||
To display the design well, it is necessary to provide no more than 2 additional buttons.
|
To display the design well, it is necessary to provide no more than 2 additional buttons.
|
||||||
|
|
||||||
|
@@ -26,6 +26,7 @@ interface DialogData {
|
|||||||
descriptionTemplate?: TemplateRef<any>;
|
descriptionTemplate?: TemplateRef<any>;
|
||||||
headerIcon?: string;
|
headerIcon?: string;
|
||||||
additionalActionButtons?: AdditionalDialogActionButton[];
|
additionalActionButtons?: AdditionalDialogActionButton[];
|
||||||
|
componentData: any;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -48,6 +49,7 @@ interface DialogData {
|
|||||||
| actionsTemplate | `TemplateRef<any>` | | Inserts a template styled on the left. Should be used for additional `mat-button` style buttons. (optional) |
|
| actionsTemplate | `TemplateRef<any>` | | Inserts a template styled on the left. Should be used for additional `mat-button` style buttons. (optional) |
|
||||||
| descriptionTemplate | `TemplateRef<any>` | | Inserts a description template. (optional) |
|
| descriptionTemplate | `TemplateRef<any>` | | Inserts a description template. (optional) |
|
||||||
| additionalActionButtons | `AdditionalDialogActionButton[]` | | Inserts additional base-styled buttons into the action bar on the left. (optional) |
|
| additionalActionButtons | `AdditionalDialogActionButton[]` | | Inserts additional base-styled buttons into the action bar on the left. (optional) |
|
||||||
|
| componentData | `any` | | Data that injected in contentComponent. (optional) |
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
|
@@ -35,6 +35,7 @@ export interface DialogData {
|
|||||||
descriptionTemplate?: TemplateRef<any>;
|
descriptionTemplate?: TemplateRef<any>;
|
||||||
headerIcon?: string;
|
headerIcon?: string;
|
||||||
additionalActionButtons?: AdditionalDialogActionButton[];
|
additionalActionButtons?: AdditionalDialogActionButton[];
|
||||||
|
componentData: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface AdditionalDialogActionButton {
|
export interface AdditionalDialogActionButton {
|
||||||
|
@@ -37,7 +37,7 @@
|
|||||||
|
|
||||||
<mat-dialog-content *ngIf="data.contentTemplate || data.contentComponent || data.contentText" class="adf-dialog-content">
|
<mat-dialog-content *ngIf="data.contentTemplate || data.contentComponent || data.contentText" class="adf-dialog-content">
|
||||||
<ng-container [ngTemplateOutlet]="data.contentTemplate"></ng-container>
|
<ng-container [ngTemplateOutlet]="data.contentTemplate"></ng-container>
|
||||||
<ng-container [ngComponentOutlet]="data.contentComponent"></ng-container>
|
<ng-container *ngComponentOutlet="data.contentComponent; injector: dataInjector"></ng-container>
|
||||||
<ng-container>{{ data.contentText }}</ng-container>
|
<ng-container>{{ data.contentText }}</ng-container>
|
||||||
</mat-dialog-content>
|
</mat-dialog-content>
|
||||||
|
|
||||||
|
@@ -15,7 +15,7 @@
|
|||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, Inject, OnDestroy, ViewEncapsulation } from '@angular/core';
|
import { Component, Inject, InjectionToken, Injector, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||||
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
import { AdditionalDialogActionButton, DialogData } from './dialog-data.interface';
|
import { AdditionalDialogActionButton, DialogData } from './dialog-data.interface';
|
||||||
import { BehaviorSubject, Subject } from 'rxjs';
|
import { BehaviorSubject, Subject } from 'rxjs';
|
||||||
@@ -25,6 +25,8 @@ import { CommonModule } from '@angular/common';
|
|||||||
import { TranslateModule } from '@ngx-translate/core';
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
import { takeUntil } from 'rxjs/operators';
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
|
export const DIALOG_COMPONENT_DATA = new InjectionToken<any>('dialog component data');
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
standalone: true,
|
standalone: true,
|
||||||
selector: 'adf-dialog',
|
selector: 'adf-dialog',
|
||||||
@@ -42,6 +44,8 @@ export class DialogComponent implements OnDestroy {
|
|||||||
dialogSize: DialogSizes;
|
dialogSize: DialogSizes;
|
||||||
additionalActionButtons: AdditionalDialogActionButton[];
|
additionalActionButtons: AdditionalDialogActionButton[];
|
||||||
|
|
||||||
|
dataInjector: Injector;
|
||||||
|
|
||||||
private onDestroy$ = new Subject<void>();
|
private onDestroy$ = new Subject<void>();
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@@ -57,6 +61,9 @@ export class DialogComponent implements OnDestroy {
|
|||||||
this.cancelButtonTitle = data.cancelButtonTitle || 'COMMON.CANCEL';
|
this.cancelButtonTitle = data.cancelButtonTitle || 'COMMON.CANCEL';
|
||||||
this.additionalActionButtons = data.additionalActionButtons;
|
this.additionalActionButtons = data.additionalActionButtons;
|
||||||
this.dialogRef.addPanelClass(`${this.dialogSize}-dialog-panel`);
|
this.dialogRef.addPanelClass(`${this.dialogSize}-dialog-panel`);
|
||||||
|
this.dataInjector = Injector.create({
|
||||||
|
providers: [{ provide: DIALOG_COMPONENT_DATA, useValue: data.componentData }]
|
||||||
|
});
|
||||||
|
|
||||||
if (data.isConfirmButtonDisabled$) {
|
if (data.isConfirmButtonDisabled$) {
|
||||||
data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value));
|
data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value));
|
||||||
|
Reference in New Issue
Block a user