91

I'm seeing that among the classes added to an element, sometimes there's this 'ng-star-inserted' added as well and I'd like to know more as to why is it there?

Kamil Naja
  • 6,267
  • 6
  • 33
  • 47
vzR
  • 1,377
  • 1
  • 12
  • 16

2 Answers2

85

It's a class name that is used internally by the BrowserAnimationsModule when animating entry and leaving transitions. You can see it in the source code here.

Ben Elliott
  • 1,650
  • 14
  • 18
  • 2
    @Ben I am also seeing this class getting added automatically. But the problem is this class is getting added on our test enviroment but we are not seeing it on Dev environment. Do you know why this is happening as code from Dev goes to test so both are in sync. – G.S Abhaypal Dec 21 '17 at 09:12
  • 2
    @G.SAbhaypal have you tried injecting `NoopAnimationsModule` into your testing module? – Ben Elliott Dec 22 '17 at 11:21
  • 1
    @BenElliott No i haven't tried it yet. Is this an alternative module to `BrowserAnimationsModule` ? – G.S Abhaypal Jan 02 '18 at 11:31
  • 2
    @G.SAbhaypal Yes, it's an alternative to `BrowserAnimationsModule` which replaces any animations with "no-ops", i.e. it offers the same animations API but the animations don't actually do anything. – Ben Elliott Jan 02 '18 at 15:29
  • @BenElliott so, when using Universal, should we import BrowserAnimationsModule to browser specific module and NoopAnimationsModule in server module, correct? – Naveed Ahmed Feb 04 '18 at 15:54
  • If this class messes up your UI for some reason, here's a tip to how to get rid of it: http://benprograms.net/2018/06/30/angular-ng-star-inserted/ – Tin Sep 19 '18 at 12:34
  • 1
    @Vaz why would it? – Ben Elliott Sep 19 '18 at 14:23
  • 1
    @BenElliott Good question - why would it mess up the UI? I had to think for a while, why it would hurt to add another class to an element. The article I posted in my first comment doesn't explain any specific use-case, and I came across this article just out of curiosity about the class - not having any use-case myself. But since you ask, I found two scenarios, in which this might hurt - the first one seems legit to me, the second one is IMO a result of bad test impl: https://stackoverflow.com/a/19547140/3898746, https://github.com/angular/angular/blob/master/CHANGELOG.md#520-2018-01-10 – Tin Sep 19 '18 at 19:00
  • @Vaz and Ben , could you please explain , I have a scenario where I am checking particular class exists on the target element or not , when I check with only my class it doesn't pass , then after adding ng-star-inserted , it works fine , my query is so the class with 'ng-star-inserted' would be available in the production code as well , can I not only check for my exact class name , I am using = if(!((event.target).className == 'fs-heatmap-wrapper__content__box ng-star-inserted')) , my query is using ng-star-inserted along with class name might break some where – Enthu Sep 12 '19 at 19:35
  • @Enthu This is because `Element.className` is actually a space-separated list of individual classes. Either split on the space character and then check each element, or use `Element.classList` instead (IE10+). – Ben Elliott Sep 13 '19 at 11:57
6

This class cause problem with the UI so need to replace with a <ng-container *ngIf=""></ng-container>

Nuryagdy Mustapayev
  • 667
  • 1
  • 7
  • 27
eliprodigy
  • 600
  • 6
  • 8