When creating a column component for use within a grid in Angular, I am struggling with implementing a media query using ngStyle. Here is what my code looks like so far:
import { Component, Input } from '@angular/core'
const smMin = '48em'
const mdMin = '64em'
const lgMin = '75em'
const halfGutterWidth = '0.5rem'
@Component({
selector: 'fg-col',
template: `<div [ngStyle]="{
mediaQuery {
box-sizing: border-box;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
flex-basis: flexBasis,
max-width: flexBasis
}
}">
<ng-content></ng-content>
</div>`
})
let TargetDevice = 'phone' | 'tablet' | 'desktop'
let ColumnSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
export class Column {
@Input
columnSize: ColumnSize = 1;
@Input
targetDevice: TargetDevice = 'phone';
get mediaQuery() {
const mq = {
phone: `@media only screen and (min-width: ${smMin})`,
tablet: `@media only screen and (min-width: ${mdMin})`,
desktop: `@media only screen and (min-width: ${lgMin})`
}
return mq[this.targetDevice];
}
get flexBasis() {
const baseWidth = 100 / TOTAL_COLUMNS
const flexBasisNum = baseWidth * columnSize
return `${flexBasisNum}%`
}
}
An error is appearing in the browser console as follows:
zone.js:516 Unhandled Promise rejection: Template parse errors:
Parser Error: Missing expected : at column 18 in [{
mediaQuery {
'box-sizing': 'border-box',
flex: '0 0 auto',
'padding-right': '0.5rem',
'padding-left': '0.5rem',
'flex-basis': flexBasis,
'max-width': flexBasis
}
}] in Column@0:5 ("<div [ERROR ->][ngStyle]="{
mediaQuery {
'box-sizing': 'border-box',
"): Column@0:5
Parser Error: Unexpected token } at column 207 in [{
mediaQuery {
'box-sizing': 'border-box',
flex: '0 0 auto',
'padding-right': '0.5rem',
'padding-left': '0.5rem',
'flex-basis': flexBasis,
'max-width': flexBasis
}
}