File
Implements
Metadata
| selector |
cmn-hero |
| styleUrls |
./hero.component.scss |
| templateUrl |
./hero.component.html |
|
action
|
Type : literal type
|
|
|
|
alignment
|
Type : "centered" | "left" | "right"
|
|
|
Outputs
|
onInit
|
Type : EventEmitter<void>
|
|
|
Methods
|
Public
ngAfterViewInit
|
ngAfterViewInit()
|
|
|
|
|
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
selector: 'cmn-hero',
templateUrl: './hero.component.html',
styleUrls: [ './hero.component.scss' ],
})
export class HeroComponent implements AfterViewInit {
@Input() public readonly title: string;
@Input() public readonly image: string;
@Input() public readonly isGrid: boolean;
@Input() public readonly subTitle: string;
@Input() public readonly hasImgExtraSize: boolean;
@Input() public readonly action: { label: string, style: string };
@Input() public readonly alignment: 'centered' | 'left' | 'right';
@Output('onInit') private readonly fireInit: EventEmitter<void> = new EventEmitter<void>();
public ngAfterViewInit(): void {
this.fireInit.emit();
}
}
<section class="hero">
<div class="hero-body">
<ng-container *ngIf="!!title; then classic else content"></ng-container>
<ng-template #content>
<ng-content></ng-content>
</ng-template>
<ng-template #classic>
<div class="container">
<div class="columns">
<div class="column has-text-{{ alignment }}">
<h1 class="f-normal bold">{{ title }}</h1>
<h2 class="f-normal">{{ subTitle }}</h2>
<cmn-button [class]="action.style"
*ngIf="action"
[label]="action?.label">
</cmn-button>
</div>
<div class="column has-text-centered"
*ngIf="image">
<img [src]="image" alt="">
</div>
</div>
</div>
</ng-template>
</div>
</section>
$marginBottom: 30px;
::ng-deep {
.hero {
h1,
h2 {
margin-bottom: $marginBottom;
}
}
}
Legend
Html element with directive