projects/common/lib/components/page-framework/page-framework.component.ts
The "Page Framework" is a template to be used on FPCare pages to ensure consistent layout. It should be used on every page unless there is a good exception.
Note: CommonFormActionBar (and SubmitBar) must come AFTER this element, not inside in version 2.0.0 and above.
<common-page-framework>
<div>This will go in the middle column</div>
<p>So will this</p>
<div aside> This will go in the side column, or tips.</div>
</common-page-framework>
<common-form-action-bar></common-form-action-bar>| encapsulation | ViewEncapsulation.None |
| selector | common-page-framework |
| styleUrls | ./page-framework.component.scss |
| templateUrl | ./page-framework.component.html |
Methods |
Inputs |
| layout | |
Type : "single" | "double" | "blank" | "default"
|
|
Default value : 'default'
|
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, magnam ipsam. Sit quasi natus architecto rerum unde non provident! Quia nisi facere amet iste mollitia voluptatem non molestias esse optio?
Aperiam fugiat consectetur temporibus, iste repellat, quisquam sapiente nisi distinctio optio, autem nemo tenetur error eum voluptatibus ab accusamus quis voluptatum blanditiis. Quam et ut reprehenderit vitae nobis, at ipsum!
Exercitationem pariatur animi repudiandae corporis obcaecati ratione ducimus beatae quam, nostrum magnam unde numquam quidem cupiditate odit id. Beatae alias molestiae, optio incidunt harum quia voluptates deserunt sequi. Nesciunt, optio.
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
/**
* The "Page Framework" is a template to be used on FPCare pages to ensure
* consistent layout. It should be used on every page unless there is a good
* exception.
*
* Note: CommonFormActionBar (and SubmitBar) must come *AFTER* this element, not
* inside in version 2.0.0 and above.
*
* @example
* <common-page-framework>
* <div>This will go in the middle column</div>
* <p>So will this</p>
* <div aside> This will go in the side column, or tips.</div>
* </common-page-framework>
* <common-form-action-bar></common-form-action-bar>
*
* @export
*/
@Component({
selector: 'common-page-framework',
templateUrl: './page-framework.component.html',
styleUrls: ['./page-framework.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class PageFrameworkComponent implements OnInit {
@Input() layout: 'single' | 'double' | 'blank' | 'default' = 'default';
ngOnInit() {
}
}
<div class="row" [ngSwitch]="layout">
<ng-container *ngSwitchCase="'default'">
<div class="col-md-8">
<div class="px-lg-4 px-md-3 py-3">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</div>
<div class="col-md-4 aside-col">
<div class='pr-lg-5 pr-md-4 py-2'>
<ng-container *ngTemplateOutlet="aside"></ng-container>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'double'">
<div class="col-md-6">
<div class="px-lg-5 px-md-3 py-3">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</div>
<div class="col-md-6">
<div class='px-lg-5 px-md-3 py-3'>
<ng-container *ngTemplateOutlet="aside"></ng-container>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'single'">
<div class="col-md-8 offset-lg-2">
<div class="px-lg-5 px-md-3 py-3">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</div>
</ng-container>
<ng-container *ngSwitchCase="'blank'">
<div class="col-sm-12">
<div class="px-lg-5 px-md-3 py-3">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</div>
</ng-container>
</div>
<ng-container *ngTemplateOutlet="submit"></ng-container>
<!-- We use ng-template here to get around a bug with having multiple ng-contents in one template. By default, if there are duplicate ng-contents in a template Angular will select the very first one - even if latter ones are 'removed' by ngSwitch or ngIf.-->
<ng-template #content>
<ng-content></ng-content>
</ng-template>
<ng-template #aside>
<ng-content select='aside'></ng-content>
</ng-template>
<ng-template #submit>
<ng-content select='common-form-action-bar'></ng-content>
<ng-content select='common-form-submit-bar'></ng-content>
</ng-template>