Outputs
|
contextChanged
|
Type : EventEmitter<string>
|
|
|
|
form
|
Type : unknown
|
Default value : new UntypedFormGroup({
context: new UntypedFormControl()
})
|
|
|
import {
ChangeDetectionStrategy,
Component,
DestroyRef,
EventEmitter,
inject,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@Component({
selector: 'acl-environment',
templateUrl: './acl-environment.component.html',
styleUrls: ['./acl-environment.component.scss'],
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AclEnvironmentComponent implements OnInit, OnChanges {
@Input() context!: string;
@Output() contextChanged: EventEmitter<string> = new EventEmitter<string>();
private destroyRef = inject(DestroyRef);
form = new UntypedFormGroup({
context: new UntypedFormControl()
});
ngOnInit(): void {
this.form.controls['context'].valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((value) => {
this.contextChanged.emit(value);
});
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['context']) {
this.form.controls['context'].setValue(changes['context'].currentValue, { emitEvent: false });
}
}
}
<form [formGroup]="form">
<div class="section">
<h4 class="headline">Environment</h4>
<div class="description">
It is possible to set arbitrary key-value combinations in the ACL environment programmatically
using the <span class="monospace">setEnvironmentValue(key, value)</span> function exposed by
the AclService.<br />
To test rule evaluation you can set the <span class="monospace">env.context</span> value here:
</div>
<label class="label">
<span class="label-text">env.context</span>
<input type="text" formControlName="context" />
</label>
</div>
</form>
@use '../../inspector.shared' as *;
@use '../../inspector.colors' as *;
:host {
display: block;
}
.label {
margin-bottom: 8px;
display: inline-block;
}
.label-text {
display: inline-block;
min-width: 100px;
}
.section {
max-width: 600px;
margin-bottom: 24px;
}
.headline {
margin-bottom: 8px;
}
.description {
line-height: 20px;
margin-bottom: 12px;
}
.monospace {
font-family: monospace, sans-serif;
background-color: $debug-color-dark;
color: $debug-color-text;
padding: 0 4px;
border-radius: 3px;
}
Legend
Html element with directive