Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Content Header Example
<ss-content-header [status]="statusColor" [editing]="isEditing" [alignRight]="false">
<span class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2" [ngClass]="{'mt-0 b-auto': !editing}">From:</span>
<mat-form-field floatLabel="never" *ngIf="editing">
<input matInput [value]="fromName" [(ngModel)]="fromName" placeholder="Name" (change)="onInputChange($event, $event.target.value)">
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing">{{fromName}}</span>
</span>
<span class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2" [ngClass]="{'mt-0 b-auto': !editing}">Don't Resize Ever:</span>
<mat-form-field floatLabel="never" *ngIf="editing">
<!-- Simply don't include the (change) event -->
<input matInput [value]="firstName" [(ngModel)]="firstName" placeholder="First Name">
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing">{{firstName}}</span>
</span>
<span class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2" [ngClass]="{'mt-0 b-auto': !editing}">Do Resize! (normal):</span>
<mat-form-field floatLabel="never" *ngIf="editing">
<input matInput [value]="lastName" [(ngModel)]="lastName" placeholder="Last Name" (change)="onInputChange($event, $event.target.value)">
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing">{{lastName}}</span>
</span>
<span class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2" [ngClass]="{'mt-0 b-auto': !editing}">Favourite Colour:</span>
<mat-form-field floatLabel="never" *ngIf="editing">
<input matInput [value]="favColour" [(ngModel)]="favColour" placeholder="Favourite Colour" (change)="onInputChange($event, $event.target.value)">
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing">{{favColour}}</span>
</span>
<span class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2" [ngClass]="{'mt-0 b-auto': !editing}">Status (Disabled Input):</span>
<mat-form-field floatLabel="never" *ngIf="editing" [ngClass]="{'ss-red': true}">
<input matInput [value]="status" [(ngModel)]="status" placeholder="Status" disabled (change)="onInputChange($event, $event.target.value)">
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing" [ngClass]="{'ss-red': true}">{{status}}</span>
</span>
<span class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2" [ngClass]="{'mt-0 b-auto': !editing}">Date:</span>
<mat-form-field floatLabel="never" *ngIf="editing">
<input matInput [value]="date" [(ngModel)]="date" placeholder="2018-06-13">
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing">{{date}}</span>
</span>
<div class="d-flex m-1d" [ngClass]="{'my-0': editing}">
<span class="font-medium-14 mr-2">Type:</span>
<mat-form-field floatLabel="never" *ngIf="editing">
<!-- The widths of these are handled case-by-case -->
<mat-select name="alerts" placeholder="Select">
<mat-option *ngFor="let alert of alerts" [value]="alert?.value">
{{alert.value}}
</mat-option>
</mat-select>
</mat-form-field>
<span class="font-regular-14" *ngIf="!editing && alertValue">{{alertValue}}</span>
<span class="font-regular-14 ss-dark-blue" *ngIf="!editing && !alertValue">Please Select</span>
</div>
<span class="d-flex m-1d btn-section" [ngClass]="{'my-4': editing}">
<span class="font-medium-14 mr-2">Related Documents:</span>
<span class="mt-20-minus">
<button mat-raised-button class="sec-btn m-1">
<mat-icon svgIcon="message"></mat-icon> Emergency Drill Record</button>
<button mat-raised-button class="sec-btn m-1">
<mat-icon svgIcon="time"></mat-icon> Login Records</button>
</span>
</span>
</ss-content-header>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment