override component #1
Description
nde-login-dialog niet overschreven
nde-login-form-content wel overschreven
DotComponent aangemaakt met dot.component.html
<div>DOT DOT</div>
Voorbeeld 1
customComponentMappings.ts:
export const selectorComponentMap = new Map<string, any>([
['nde-login-form-content-before', DotComponent],
['nde-login-form-content-after', DotComponent],
['nde-login-form-content-top', DotComponent],
['nde-login-form-content-bottom', DotComponent],
['nde-login-form-content', DotComponent],
]);
Resultaat:
<nde-login-dialog class="mat-mdc-dialog-component-host ng-star-inserted">
<nde-login-form-content _nghost-ng-c2940692517="" class="ng-star-inserted"></nde-login-form-content>
<ng-component class="ng-star-inserted">
<nde-login-form-content-from-remote-0 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-form-content-from-remote-0>
</ng-component>
</nde-login-dialog>
Voorbeeld 2
customComponentMappings.ts:
export const selectorComponentMap = new Map<string, any>([
['nde-login-form-content', DotComponent],
]);
Geeft hetzelfde resultaat
customComponentMappings.ts:
export const selectorComponentMap = new Map<string, any>([
['nde-login-form-content-before', DotComponent],
['nde-login-form-content-after', DotComponent],
['nde-login-form-content-top', DotComponent],
['nde-login-form-content-bottom', DotComponent],
]);
Resultaat:
<nde-login-dialog class="mat-mdc-dialog-component-host ng-star-inserted">
<ng-component class="ng-star-inserted">
<nde-login-form-content-before-from-remote-0 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-form-content-before-from-remote-0>
</ng-component>
<nde-login-form-content _nghost-ng-c2940692517="" class="ng-star-inserted">
<ng-component class="ng-star-inserted">
<nde-login-form-content-top-from-remote-2 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-form-content-top-from-remote-2>
</ng-component>
<div _ngcontent-ng-c2940692517="" data-qa="login-dialog" class="login-form ng-star-inserted">
<div _ngcontent-ng-c2940692517="" class="flex-row flex-layout-space-between-center">
<h1 _ngcontent-ng-c2940692517="" class="login-header text-uppercase ng-star-inserted">Login using:</h1>
...
</div>
</div>
<ng-component class="ng-star-inserted">
<nde-login-form-content-bottom-from-remote-3 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-form-content-bottom-from-remote-3>
</ng-component>
</nde-login-form-content>
<ng-component class="ng-star-inserted">
<nde-login-form-content-after-from-remote-1 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-form-content-after-from-remote-1>
</ng-component>
</nde-login-dialog>
Voorbeeld 3
customComponentMappings.ts:
export const selectorComponentMap = new Map<string, any>([
['nde-login-dialog', DotComponent],
]);
Resultaat:
<div class="mat-mdc-dialog-surface mdc-dialog__surface">
<nde-login-dialog class="mat-mdc-dialog-component-host ng-star-inserted">
<nde-login-form-content _nghost-ng-c2940692517="" class="ng-star-inserted">
<div _ngcontent-ng-c2940692517="" data-qa="login-dialog" class="login-form ng-star-inserted">
<div _ngcontent-ng-c2940692517="" class="flex-row flex-layout-space-between-center">
<h1 _ngcontent-ng-c2940692517="" class="login-header text-uppercase ng-star-inserted">Login using:
</h1>
</div>
</div>
</nde-login-form-content>
</nde-login-dialog>
<ng-component class="ng-star-inserted">
<nde-login-dialog-from-remote-0 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-dialog-from-remote-0>
</ng-component>
</div>
de login-dialog met oa text "Login using:" blijft aanwezig in de dom
Voorbeeld 4
customComponentMappings.ts:
export const selectorComponentMap = new Map<string, any>([
['nde-login-dialog-before', DotComponent],
['nde-login-dialog-after', DotComponent],
['nde-login-dialog-top', DotComponent],
['nde-login-dialog-bottom', DotComponent],
]);
Resultaat:
<mat-dialog-container tabindex="-1"
class="mat-mdc-dialog-container mdc-dialog cdk-dialog-container mat-mdc-dialog-container-with-actions mdc-dialog--open"
id="mat-mdc-dialog-1" role="dialog" aria-modal="true" style="--mat-dialog-transition-duration: 150ms;">
<div class="mat-mdc-dialog-inner-container mdc-dialog__container">
<div class="mat-mdc-dialog-surface mdc-dialog__surface">
<ng-component class="ng-star-inserted">
<nde-login-dialog-before-from-remote-0 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-dialog-before-from-remote-0>
</ng-component>
<nde-login-dialog class="mat-mdc-dialog-component-host ng-star-inserted">
<ng-component class="ng-star-inserted">
<nde-login-dialog-top-from-remote-2 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-dialog-top-from-remote-2>
</ng-component>
<nde-login-form-content _nghost-ng-c2940692517="" class="ng-star-inserted">
<div _ngcontent-ng-c2940692517="" data-qa="login-dialog" class="login-form ng-star-inserted">
<div _ngcontent-ng-c2940692517="" class="flex-row flex-layout-space-between-center">
<h1 _ngcontent-ng-c2940692517="" class="login-header text-uppercase ng-star-inserted">Login
using:</h1>
...
</div>
</div>
</nde-login-form-content>
<ng-component class="ng-star-inserted">
<nde-login-dialog-bottom-from-remote-3 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-dialog-bottom-from-remote-3>
</ng-component>
</nde-login-dialog>
<ng-component class="ng-star-inserted">
<nde-login-dialog-after-from-remote-1 _nghost-ng-c3464945208="" ng-version="18.2.8">
<div _ngcontent-ng-c3464945208="">DOT DOT</div>
</nde-login-dialog-after-from-remote-1>
</ng-component>
</div>
</div>
</mat-dialog-container>