I need to use angular-ngStyle to apply CSS styles on Table data.
The logic is set up: "When the table width is less than 1250px, apply certain CSS styles". Here is the code for that:
export class NanoTableComponent {
/**
* This function checks the table width and applies styles if the width is less than 1250px;
* The challenge is figuring out where to place this logic in the HTML.
*/
tableStyle(tableWidth: number) {
console.log('Table Width: ' + tableWidth);
return tableWidth < 1250 ? { 'min-width':'75px;', 'flex':'none;' } : { 'flex': '1' };
}
}
In the SCSS class
// ********* THE ISSUE IS HERE **********
// If I change flex: none; and min-width: 75px; in this div
// I can achieve what I want. But I only want this if the table width is less than 1250px;
// Meaning these styles need to be added dynamically through Angular,
// the problem lies in where to apply these styles in the HTML.
> div {
flex: 1;
display: flex;
overflow: hidden;
margin: 0 2px;
> span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
Here is a StackBlitz with HTML, TypeScript, and SCSS files. It's not functional, but you can view all the code related to this table:
https://stackblitz.com/edit/angular-css24?file=src%2Fapp%2Fnano-table%2F_nano-table.scss
My question is: How can I access and apply the styles of the "div" from the SCSS file dynamically in the HTML?
My objective is to increase the width of the "Name" column to make it larger: