Angular — CSS Variables Utility

@Injectable()
export class CssVariablesUtility {
public getValue(propertyName: string): string | null {
try {
const root: HTMLElement = document.documentElement;
const value: string =
getComputedStyle(root).getPropertyValue(propertyName);
return value ? value.trim() : null;
} catch(ex) { return null; }
}
public setValue(propertyName: string, newValue: string): void {
try {
const root: HTMLElement = document.documentElement;
root.style.setProperty(propertyName, newValue);
} catch (ex) { }
}
}
/* Variables */
:root {
--topmenu-height: 50px;
}
/* Menu */
.top-menu {
height: var(--topmenu-height);
}
constructor(
private cssVariablesUtility: CssVariablesUtility
}
ngAfterViewInit() {
const topMenuHeight: number = this.cssVariablesUtility
.getValue('--topmenu-height')
;
el.style.height = `calc(100vh - ${topMenuHeight})`;
}

--

--

Experienced Software Engineer with more than 10 years of experience, specialized in Front-End Web technologies, with strong foundations in programming.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store