feat(package): new - mat-jumbotron supports now templates via mat-jumbotron-content

Author: AnthonyNahas

src/module/component/mat-jumbotron.component.html

@@ -0,0 +1,15 @@
+<mat-card fxLayout="row" fxLayoutAlign="center center">
+
+  <mat-card-content fxLayout="row"
+                    fxLayout.xs="column"
+                    fxLayoutGap="2rem"
+                    fxLayoutAlign="center center">
+    <!--main image-->
+    <img mat-card-xl-image src="assets/logo.svg">
+
+    <div fxLayout="column" fxFlex="50">
+      <ng-container [ngTemplateOutlet]="jumbotronContent.content"></ng-container>
+    </div>
+  </mat-card-content>
+
+</mat-card>

src/module/component/mat-jumbotron.component.ts

@@ -0,0 +1,62 @@
+import {Component, ContentChild, Input, ViewEncapsulation} from '@angular/core';
+import {ObservableMedia} from '@angular/flex-layout';
+import {map, startWith} from 'rxjs/operators';
+import {Observable} from 'rxjs/internal/Observable';
+import {MatJumbotronContentComponent} from './content/mat-jumbotron-content.component';
+
+@Component({
+  selector: 'mat-jumbotron',
+  templateUrl: './mat-jumbotron.component.html',
+  styleUrls: ['./mat-jumbotron.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class MatJumbotronComponent {
+
+  @ContentChild(MatJumbotronContentComponent)
+  jumbotronContent: MatJumbotronContentComponent;
+
+  @Input()
+  title: string;
+
+  @Input()
+  description2: string;
+
+  @Input()
+  image: string;
+
+  @Input()
+  isFluid = true;
+
+  displayIdentifier: Observable<number>;
+
+  description = 'Angular UI open source library built with material design in order ' +
+    'to illustrate a highlighted/important information for the user';
+
+  constructor() {
+  }
+
+  // private initJumbotronObsMedia() {
+  //   const matrix = new Map([
+  //     ['xs', 1],
+  //     ['sm', 1],
+  //     ['md', 2],
+  //     ['lg', 3],
+  //     ['xl', 3]
+  //   ]);
+  //   let start = 0;
+  //   matrix.forEach((cols, mqAlias) => {
+  //     if (this.observableMedia.isActive(mqAlias)) {
+  //       start = cols;
+  //       console.log('start = ', start, ' cols = ', cols);
+  //     }
+  //   });
+  //   this.displayIdentifier = this.observableMedia
+  //     .asObservable()
+  //     .pipe(
+  //       map(change => {
+  //         console.log(change);
+  //         return matrix.get(change.mqAlias);
+  //       })
+  //       , startWith(start));
+  // }
+}

src/module/component/mat-jumbotron/mat-jumbotron.component.html

@@ -1,29 +1,29 @@
-import { CommonModule } from '@angular/common';
-import { NgModule, ModuleWithProviders } from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {NgModule, ModuleWithProviders} from '@angular/core';
 
-import { MatJumbotronComponent } from './component/mat-jumbotron.component';
-import { LibService } from './service/lib.service';
 import {MatCardModule} from '@angular/material';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {MatJumbotronComponent} from './component/mat-jumbotron/mat-jumbotron.component';
+import {MatJumbotronContentComponent} from './component/mat-jumbotron/content/mat-jumbotron-content.component';
 
 // Export module's public API
-export { MatJumbotronComponent } from './component/mat-jumbotron.component';
-export { LibService } from './service/lib.service';
+export {MatJumbotronComponent} from './component/mat-jumbotron/mat-jumbotron.component';
+export {MatJumbotronContentComponent} from './component/mat-jumbotron/content/mat-jumbotron-content.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FlexLayoutModule,
     MatCardModule,
   ],
-  exports: [MatJumbotronComponent],
-  declarations: [MatJumbotronComponent]
+  exports: [MatJumbotronComponent, MatJumbotronContentComponent],
+  declarations: [MatJumbotronComponent, MatJumbotronContentComponent]
 })
 export class MatJumbotronModule {
   static forRoot(): ModuleWithProviders {
     return {
       ngModule: MatJumbotronModule,
-      providers: [LibService]
+      providers: []
     };
   }
 }