| import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; |
| import { map } from 'rxjs/operators'; |
| import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; |
| |
| @Component({ |
| selector: '<%= selector %>',<% if(inlineTemplate) { %> |
| template: ` |
| <%= indentTextContent(resolvedFiles.template, 4) %> |
| `,<% } else { %> |
| templateUrl: './<%= dasherize(name) %>.component.html',<% } if(inlineStyle) { %> |
| styles: [` |
| <%= indentTextContent(resolvedFiles.stylesheet, 4) %> |
| `]<% } else { %> |
| styleUrls: ['./<%= dasherize(name) %>.component.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>, |
| encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>, |
| changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> |
| }) |
| export class <%= classify(name) %>Component { |
| /** Based on the screen size, switch from standard to one column per row */ |
| cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( |
| map(({ matches }) => { |
| if (matches) { |
| return [ |
| { title: 'Card 1', cols: 1, rows: 1 }, |
| { title: 'Card 2', cols: 1, rows: 1 }, |
| { title: 'Card 3', cols: 1, rows: 1 }, |
| { title: 'Card 4', cols: 1, rows: 1 } |
| ]; |
| } |
| |
| return [ |
| { title: 'Card 1', cols: 2, rows: 1 }, |
| { title: 'Card 2', cols: 1, rows: 1 }, |
| { title: 'Card 3', cols: 1, rows: 2 }, |
| { title: 'Card 4', cols: 1, rows: 1 } |
| ]; |
| }) |
| ); |
| |
| constructor(private breakpointObserver: BreakpointObserver) {} |
| } |