igniteui-angular-sovn/src/lib/date-range-picker/date-range-picker.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<ng-container *ngTemplateOutlet="this.hasProjectedInputs ? startEndTemplate : defTemplate"></ng-container>

<ng-template #singleTemplate>
    <div (click)="this.open()" class="content-wrap">
        <ng-content select="igx-date-single"></ng-content>
    </div>
</ng-template>

<ng-template #startEndTemplate>
    <ng-content select="igx-date-range-start"></ng-content>
    <div [className]="separatorClass">
        <ng-container *ngTemplateOutlet="dateSeparatorTemplate || defDateSeparatorTemplate;">
        </ng-container>
    </div>
    <ng-content select="igx-date-range-end"></ng-content>
</ng-template>

<ng-template #defIcon>
    <igx-icon>
        date_range
    </igx-icon>
</ng-template>

<ng-template #defDateSeparatorTemplate>{{ dateSeparator }}</ng-template>

<ng-template #defTemplate>
    <igx-input-group [type]="this.type" [displayDensity]="this.displayDensity" (click)="this.open()">
        <!-- only set mask placeholder when empty, otherwise input group might use it as label if none is set -->
        <input #singleInput igxInput type="text" readonly [disabled]="this.disabled" [placeholder]="this.value ? '' : singleInputFormat"
            role="combobox" aria-haspopup="grid" [attr.aria-expanded]="!this.collapsed" [attr.aria-labelledby]="this.label?.id"
            [value]="this.value | dateRange: this.appliedFormat : this.locale : this.formatter" />

        <igx-prefix *ngIf="!this.toggleComponents.length">
            <ng-container *ngTemplateOutlet="defIcon"></ng-container>
        </igx-prefix>

        <ng-container ngProjectAs="[igxLabel]">
            <ng-content select="[igxLabel]"></ng-content>
        </ng-container>
        <ng-container ngProjectAs="igx-prefix">
            <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
        </ng-container>
        <ng-container ngProjectAs="igx-suffix">
            <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
        </ng-container>
        <ng-container ngProjectAs="igx-hint">
            <ng-content select="igx-hint,[igxHint]"></ng-content>
        </ng-container>
    </igx-input-group>
</ng-template>