How can i set zindex in typescript for angular 5

Question

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;}

Maybe this can help you out: https://stackoverflow.com/questions/35882670/dynamically-updating-css-in-angular-2 — Jacopo Sciampi, Jul 23 '18 at 10:12

Drenai · Answer 1 · 2019-04-13T17:27:20.217

15

You might be better using inline style binding rather than using querySelector - depending on the situation

<p [style.z-index]="1">
  Some text
</p>

edited Apr 13 '19 at 17:27

answered Jul 23 '18 at 10:14

Drenai

I'm a C# developer trying to learn this stuff - not arguing with what you are saying but...why might your example be better? – Jon Vote Jun 26 '20 at 17:08
2

`document.querySelector` is bypassing all of Angular's template binding functionality – Drenai Jun 28 '20 at 17:16

Gurpreet Singh · Accepted Answer · 2019-01-16T10:03:58.207

11

You can use NgStyle directive for set zindex

[ngStyle]="{'z-index':condition ? 9 : 0 }"

edited Jan 16 '19 at 10:03

answered Jul 23 '18 at 11:08

Gurpreet Singh

RajeshKdev · Answer 3 · 2018-07-23T11:58:10.180

0

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;
}

edited Jul 23 '18 at 11:58

answered Jul 23 '18 at 10:55

RajeshKdev

By typscript...not inline – Apple Orange Jul 23 '18 at 11:01
The above code is not inline, Its binding! We have written css classes (You can place it accordingly). – RajeshKdev Jul 23 '18 at 11:03
I would say manipulating the `DOM` is not correct approach. Try utilizing the Angular features max. – RajeshKdev Jul 23 '18 at 11:05
gettign error:Property 'style' does not exist on type 'Element'. any – Apple Orange Jul 23 '18 at 12:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/176568/discussion-between-rajeshkdev-and-apple-orange). – RajeshKdev Jul 23 '18 at 12:28

3 Answers3