File
Index
Properties
|
|
Methods
|
|
HostBindings
|
|
Accessors
|
|
Constructor
constructor(elementRef: ElementRef, consentService: ConsentService, data: literal type)
|
|
Parameters :
Name |
Type |
Optional |
elementRef |
ElementRef<HTMLElement>
|
No
|
consentService |
ConsentService
|
No
|
data |
literal type
|
No
|
|
HostBindings
class
|
Type : "app-tracking-popup"
|
Default value : 'app-tracking-popup'
|
|
Methods
showButton
|
showButton(button: "opt-in" | "opt-out")
|
|
Parameters :
Name |
Type |
Optional |
button |
"opt-in" | "opt-out"
|
No
|
|
submit
|
submit(entry: boolean)
|
|
Parameters :
Name |
Type |
Optional |
entry |
boolean
|
No
|
|
Readonly
clsName
|
Type : string
|
Default value : 'app-tracking-popup'
|
Decorators :
@HostBinding('class')
|
|
container
|
Type : HTMLElement
|
|
Public
data
|
Type : literal type
|
Decorators :
@Inject(MAT_SNACK_BAR_DATA)
|
|
Accessors
allowTelemetry
|
getallowTelemetry()
|
|
import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import { Consent, ConsentService } from '../../services/consent.service';
@Component({
selector: 'app-tracking-popup',
templateUrl: './tracking-popup.component.html',
styleUrls: ['./tracking-popup.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TrackingPopupComponent {
@HostBinding('class') readonly clsName = 'app-tracking-popup';
get allowTelemetry(): Consent {
return this.consentService.consent;
}
container: HTMLElement;
constructor(
elementRef: ElementRef<HTMLElement>,
readonly consentService: ConsentService,
@Inject(MAT_SNACK_BAR_DATA) public data: { preClose: () => void },
) {
this.container = elementRef.nativeElement;
}
dismiss(): void {
this.data.preClose();
}
submit(entry: boolean): void {
this.consentService.setConsent(entry ? 'given' : 'rescinded');
this.dismiss();
}
showButton(button: 'opt-in' | 'opt-out'): boolean {
const { allowTelemetry } = this;
if (allowTelemetry === 'not-set') {
return true;
} else {
return button === 'opt-in' ? allowTelemetry === 'rescinded' : allowTelemetry === 'given';
}
}
}
<p>We log usage to improve this service.</p>
<button *ngIf="showButton('opt-in')" mat-button color="basic" (click)="submit(true)">
{{ allowTelemetry === 'not-set' ? 'I understand' : 'Opt in' }}
</button>
<button *ngIf="showButton('opt-out')" mat-button color="basic" (click)="submit(false)">Opt out</button>
:host {
display: flex;
align-items: center;
min-width: 400px;
z-index: 9999;
p {
margin: 24px;
}
button {
margin: 1rem;
min-width: 6rem;
background-color: #007cbe;
display: flex;
justify-content: center;
}
}
Legend
Html element with directive