Is there a way to set a value in scss file from the ts component like the below example
public display: "none" | "block";
ngOnInit(): void {
his.display = "none";
}
::ng-deep #clear {
display: {{display}} !important;
}
The element with the id clear is inside a component,the component is from a library that i installed from the npm.
It's impossible, instead of this, you can bind css like this
<div id="clear" [style.display]="display ? 'block': 'none'">
....
</div>
service between components. [style.display]="mySevice.display ? 'block': 'none'" Now from one component you can toggle mySevice.display value, and in second will be updated display propertyimagine you wanna after click on a button change theme of template from the light mode to the dark and for that is necessary after click you change all of your component template theme from light to dark. the first thing you can do is create angular service and after click on the button change property isDarkMode and subscribe this property in each component for example:
in theme.service.ts
private _isDarkMode = new Subject<boolean>();
isDarkMode = this._isDarkMode.asObservable();
setDarkTheme(isDarkTheme: boolean): void {
this._darkTheme.next(isDarkTheme);
}
in test.component.ts
ngOnInit(): void {
this.isDarkMode = this.themeService.isDarkMode
}
in test.component.html
<div [ngClass]="{'test-dark-mode': isDarkMode }"></div>
and remember you must add dark mode style for each of your component for that write this logic and handle class by [ngClass].
but
you can do sth else by using mixin for example you write mixin for styling test component template with name @mixin creat-test-theme($theme) and style change with your variable
and you only subscribe isDarkMode from theme.service.ts in app.component.ts and remove another subscribe from each component
in app.component.ts
ngOnInit(): void {
this.isDarkMode = this.themeService.isDarkMode
}
in app.component.html
<div [ngClass]="{'dark-mode': isDarkMode }"></div>
and in your app.component.scss .dark-mode in
.dark-mode {
@include creat-test-theme($dark-theme)
}
so each time your dark-mode class is added to the DOM automatically your mixin for each component call and change that component to current theme
Reading your comments, it seems like maybe you are using a component that you programmatically want to add styles to, but you don't have access to the component in Angular.
It may not be pretty, but if the given answers aren't going to work for you, then there is always plain old javascript which will always work.
constructor(private document : Document) {
}
ngOnInit() {
this.document.getElementById('clear').style.display = 'none';
}
Of course, this is a pretty heavy handed approach and one you want to be careful of.
