Having trouble defining grid areas with ngStyle - css

Question

I created a mechanism for generating CSS Grids which I'm trying to implement with ngStyle. Here's what's generated
"GridAreas": {
"LinkContainer": "{'grid-area': 'link-row-start / content-col-start / link-row-end / content-col-end'}",
"BodySection" : "{'grid-area': 'content-row-start / content-col-start / content-row-end / content-col-end', 'justify-content': 'stretched'}",
"FooterSection": "{'grid-area': 'footer-row-start / content-col-start / footer-row-end / footer-col-end'}"
}
I tried using it in the html like this
<link-container [ngStyle]="Output.GridAreas.LinkContainer" [SiteLinks]="Links"></link-container>
and I got this error
Cannot find a differ supporting object '{'grid-area': 'link-row-start / content-col-start / link-row-end / content-col-end'}'
I then tried using functions like this
loadLinkArea(){ return this.Output.GridAreas.LinkContainer; }
calling in the HTML like this
<link-container [ngStyle]="loadLinkArea()"></link-container>
I received the same exact error. Here's how the data gets processed.
Shape of overall data
export class GridType {
GridName : string = '';
Columns : Array<GridLine> = new Array();
Rows : Array<GridLine> = new Array();
Areas : Array<AreaList> = new Array(); /*the part I'm focusing on*/
Type : string = '';
}
export class AreaList {
AreaName : string = '';
Specs : GridArea = new GridArea();
}
export class GridArea {
Area : string = '';
Params? : Array<ParamData> = new Array();
}
export class ParamData {
Param : string = '';
Setting : string = '';
}
Areas Data
Areas : [
{
AreaName : 'LinkContainer',
Specs : { Area: 'link-row-start / content-col-start / link-row-end / content-col-end' }
},
{
AreaName : 'BodySection',
Specs : {
Area : 'content-row-start / content-col-start / content-row-end / content-col-end',
Params : [ { Param: 'justify-content', Setting: 'stretched' } ]
}
},
{
AreaName : 'FooterSection',
Specs : { Area: 'footer-row-start / content-col-start / footer-row-end / footer-col-end' }
}
]
The above body of data gets passed into this function
export function buildGridAreas( data: AreaList[] ){
let areas: StringList = new StringList();
data.forEach( a => {
let b: string = '';
if( a.Specs.Params ){
let c: string[] = [];
a.Specs.Params.forEach( prs => {
const d: string = "'"+prs.Param+"': "+prs.Setting;
c.push(d);
});
b = "{'grid-area': "+a.Specs.Area+", "+c.join(', ')+"}";
}
else{ b = "{'grid-area': "+a.Specs.Area+"}"; }
areas[ a.AreaName ]=b;
});
return areas;
}
the rest of the code that generates for defining the grid looks like this
"GridCode": "[top-bleed-start] 10.245000000001024px [top-bleed-end link-row-start] 40.9800000000041px [link-row-end content-row-start] [content-row-end footer-row-start] 163.9200000000164px [footer-row-end bottom-bleed-start] 10.245000000001024px [bottom-bleed-end]/[left-bleed-start] 10.245000000001024px [left-bleed-end content-col-start] 1331.8500000001332px [content-col-end right-bleed-start] 10.245000000001024px [right-bleed-end]"
Can anybody spot where I'm going wrong?

Answer 1

The syntax for ngStyle is like this:
<div [ngStyle]="{'background-color' : color}"></div>
If you do that, the attribute value is an expression. So in your case, Angular treats the value of Output.GridAreas.LinkContainer as an expression. On the other hand, it seems you expected the value of Output.GridAreas.LinkContainer to be treated as if it has been literally the attribute value in the first place.
As far as I understand your code, the solution should be simple: just remove the doublequotes from the right-hand side of your style declarations, i.e. just use plain objects.
[UPDATE] In response to your comment, just two snippets of code:
a) This component basically does what you had in your initial problem description:
import {Component} from '#angular/core';
#Component({
selector: 'app-root',
template: `<div [ngStyle]="Output.GridAreas.LinkContainer">Works</div>`
})
export class AppComponent {
public Output = {
GridAreas: {
LinkContainer: "{'grid-area': 'link-row-start / content-col-start / link-row-end / content-col-end'}"
}
};
}
This code will result in the “Cannot find a differ …” error you mentioned.
b) Code with the quotes removed, which will work:
import {Component} from '#angular/core';
#Component({
selector: 'app-root',
template: `<div [ngStyle]="Output.GridAreas.LinkContainer">Works</div>`
})
export class AppComponent {
public Output = {
GridAreas: {
LinkContainer: {'grid-area': 'link-row-start / content-col-start / link-row-end / content-col-end'}
}
};
}
I admit I was not committed enough to go through all your code in detail (BTW: IMO, the code would become more readable if it was using ES6 template strings), but it looks like you construct strings instead of objects. In other words, instead of …
b = "{'grid-area': "+a.Specs.Area+"}";
… you should use something like …
b = {'grid-area': a.Specs.Area};
(untested). So it seems to be a problem of how you construct your code, not an Angular problem.