File
Implements
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Outputs
|
contextChanged
|
Type : EventEmitter<string>
|
|
|
|
form
|
Default value : new UntypedFormGroup({
context: new UntypedFormControl()
})
|
|
|
import {
Component,
EventEmitter,
Input,
OnChanges,
OnInit,
Output,
SimpleChanges
} from '@angular/core';
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@Component({
selector: 'acl-environment',
templateUrl: './acl-environment.component.html',
styleUrls: ['./acl-environment.component.scss'],
standalone: false
})
export class AclEnvironmentComponent implements OnInit, OnChanges {
@Input() context!: string;
@Output() contextChanged: EventEmitter<string> = new EventEmitter<string>();
form = new UntypedFormGroup({
context: new UntypedFormControl()
});
ngOnInit(): void {
this.form.controls['context'].valueChanges.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 *;
: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: #000;
padding: 0 4px;
}
Legend
Html element with directive