I am trying to set zindex for a class using typescript. But it is not working. If you have any idea, please share with me.
ngOnInit() { (<HTMLElement>document.querySelector('.pagemode')).style.z-index = 1;}
-
1Maybe this can help you out: stackoverflow.com/questions/35882670/…Jacopo Sciampi– Jacopo Sciampi2018-07-23 10:12:26 +00:00Commented Jul 23, 2018 at 10:12
Add a comment
|
3 Answers
You might be better using inline style binding rather than using querySelector - depending on the situation
<p [style.z-index]="1">
Some text
</p>
1 Comment
Jon Vote
I'm a C# developer trying to learn this stuff - not arguing with what you are saying but...why might your example be better?
You can use NgStyle directive for set zindex
[ngStyle]="{'z-index':condition ? 9 : 0 }"
Comments
You can use NgClass directive rather than manipulating the DOM.
In your Css/Scss file:
.class1 {
z-index: -1;
}
.class2 {
z-index: 1;
}
In your TS file:
YourBooleanVariableNameHere : boolean;
ngOnInit() {
this.YourBooleanVariableNameHere = true;
}
In your Html file:
If your condition is met:
<some-element [ngClass]="{'class1 class2' : YourBooleanVariableNameHere }">...</some-element>
If your condition is not met: Note that there is ! symbol with the variable
<some-element [ngClass]="{'class1' : !YourBooleanVariableNameHere }">...</some-element>
Read Usage Notes for more examples. Refer here for more approaches.,
Or Alternatively you can try the same approach, which is not recommended!
Update:
ngOnInit() {
document.getElementsByClassName("pagemode")[0].style.zIndex = 1;
}
answered Jul 23, 2018 at 10:55
Rajeshkumar Kandhasamy
6,4997 gold badges61 silver badges84 bronze badges
5 Comments
Apple Orange
By typscript...not inline
Rajeshkumar Kandhasamy
The above code is not inline, Its binding! We have written css classes (You can place it accordingly).
Rajeshkumar Kandhasamy
I would say manipulating the
DOM is not correct approach. Try utilizing the Angular features max.Apple Orange
gettign error:Property 'style' does not exist on type 'Element'. any
Rajeshkumar Kandhasamy
Let us continue this discussion in chat.