projects/common/lib/components/page-section/page-section.component.ts
| encapsulation | ViewEncapsulation.None |
| selector | common-page-section |
| styleUrls | ./page-section.component.scss |
| templateUrl | ./page-section.component.html |
Methods |
Inputs |
constructor()
|
| layout | |
Type : "double" | "tips" | "noTips"
|
|
Default value : 'tips'
|
|
| 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';
// IMPROVEMENT: Add a 'flex' @Input(), that adds display flex. Importantly, it
// must set flex on the wrapper/row divs in the html. There are some cases
// (like SiteReg) where having flex layout is beneficial. My first suggestion
// was to simply style the <common-page-section>, but the problem is that we
// need flex on the child elements of page-section (that still wrap ng-content).
@Component({
selector: 'common-page-section',
templateUrl: './page-section.component.html',
styleUrls: ['./page-section.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class PageSectionComponent implements OnInit {
@Input() layout: 'double' | 'tips' | 'noTips' = 'tips';
constructor() { }
ngOnInit() {
}
}
<div class="row" [ngSwitch]="layout">
<ng-container *ngSwitchCase="'tips'">
<div class="col-md-8">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
<div class="col-md-4 aside-col">
<ng-container *ngTemplateOutlet="aside"></ng-container>
</div>
</ng-container>
<ng-container *ngSwitchCase="'double'">
<div class="col-md-6">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
<div class="col-md-6">
<ng-container *ngTemplateOutlet="aside"></ng-container>
</div>
</ng-container>
<ng-container *ngSwitchCase="'noTips'">
<div class="col-md-12">
<ng-container *ngTemplateOutlet="content"></ng-container>
</div>
</ng-container>
</div>
<!-- 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>