override component

[TomVanmechelen]

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>