### File

`projects/commons/src/lib/elements/hero/components/hero.component.ts`

### Implements

`AfterViewInit`

### Metadata

selector | `cmn-hero`
styleUrls | `./hero.component.scss`
templateUrl | `./hero.component.html`

### Index

###### Methods
Public ngAfterViewInit
###### Inputs
action alignment hasImgExtraSize image isGrid subTitle title
###### Outputs
onInit

### Inputs

action
Type : `literal type`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:15

alignment
Type : `"centered" | "left" | "right"`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:16

hasImgExtraSize
Type : `boolean`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:14

image
Type : `string`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:11

isGrid
Type : `boolean`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:12

subTitle
Type : `string`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:13

title
Type : `string`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:10

### Outputs

onInit
Type : `EventEmitter<void>`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:18

### Methods

Public ngAfterViewInit
`ngAfterViewInit()`
Defined in projects/commons/src/lib/elements/hero/components/hero.component.ts:20
Returns : `void`

    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>

`./hero.component.scss`

    $marginBottom: 30px;

    ::ng-deep {
        .hero {
            h1,
            h2 {
                margin-bottom: $marginBottom;
            }
        }

    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""