File
Metadata
| encapsulation |
ViewEncapsulation.Emulated |
| selector |
mat-jumbotron |
| styleUrls |
mat-jumbotron.component.scss |
| templateUrl |
./mat-jumbotron.component.html |
import {Component, ContentChild, Input, ViewEncapsulation} from '@angular/core';
import {MatJumbotronContentComponent} from './content/mat-jumbotron-content.component';
@Component({
selector: 'mat-jumbotron',
templateUrl: './mat-jumbotron.component.html',
styleUrls: ['./mat-jumbotron.component.scss'],
encapsulation: ViewEncapsulation.Emulated
})
export class MatJumbotronComponent {
@ContentChild(MatJumbotronContentComponent)
jumbotronContent: MatJumbotronContentComponent;
@Input()
imgURL: string;
constructor() {
}
}
<mat-card fxLayout="row" fxLayoutAlign="center center">
<mat-card-content fxLayout="row"
fxFlex
fxLayout.xs="column"
fxLayoutGap="2rem"
fxLayoutAlign="center center">
<!--main image-->
<img *ngIf="imgURL"
mat-card-xl-image
[src]="imgURL">
<!--content-->
<div fxLayout="column" [fxFlex]="imgURL ? 50 : 100">
<ng-container [ngTemplateOutlet]="jumbotronContent.content"></ng-container>
</div>
</mat-card-content>
</mat-card>
Legend
Html element with directive