2

In my project, Angular adds css classes to HTML elements and components at runtime :

<div class="ng-tns-c99-6">..</div>

I've tried : 

encapsulation: ViewEncapsulation.None

but it still adds the CSS class at runtime.

I found this answer here and tried to set ViewEncapsulation.None globally, but this doesn't affect it either, the CSS classes are still being added.

Is there a way to turn it off?

Wolf359
  • 2,620
  • 4
  • 42
  • 62

1 Answers1

1

It is not possible to set ViewEncapsulation globally. Issue 18346 on GitHub suggests to allow setting it at the module level. The status of the issue is Open at the present moment.

Set ViewEncapsulation per module #18346

Current behavior

Currently, we set the view encapsulation at the component level.

@Component({
  selector: 'song-track',
  encapsulation: ViewEncapsulation.Native
})
Meaning that if I want to use native Shadow DOM throughout my app, 
I have to add that bit of configuration to every single component.

Expected behavior

It would be great if I could set it at the module level.

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [
      ...
      { provide: ViewEncapsulationMode, useValue: ViewEncapsulation.Native },
      ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • the CSS classes are still added even when setting "encapsulation: ViewEncapsulation.None" inside the component's @Component() directive. Any idea why? – Wolf359 Jun 03 '20 at 14:13
  • That is strange. The `ng-...` class is not added when I set `ViewEncapsulation.None`, as you can see in [this stackblitz](https://stackblitz.com/edit/angular-4jpodx?file=src%2Fapp%2Fapp.component.html). – ConnorsFan Jun 03 '20 at 14:22
  • Also, with the default `ViewEncapsulation`, I see an `_ngcontent...` attribute, not a class. See [this stackblitz](https://stackblitz.com/edit/angular-q2lc2k?file=src/app/app.component.ts). – ConnorsFan Jun 03 '20 at 14:32
  • Thanks for the samples. I saw that ViewEncapsulation.None worked. Those classes I want to get rid of and whose names start with 'ng-tns-...' are still a mystery though, maybe Angular CDK related. – Wolf359 Jun 03 '20 at 14:50
  • The classes maybe related to Angular Material. See [this question](https://stackoverflow.com/questions/51896805/angular-material-ng-tns-class-changes-margin-of-items-in-my-table-can-use-css-t). – ConnorsFan Jun 03 '20 at 14:53
  • 1
    Just found [this](https://github.com/angular/angular/issues/17492) and in Angular source code [here](https://github.com/angular/angular/blob/ed73d4f3ac6b542bf5ea3eb73fbe91e2ceabcdb4/packages/animations/browser/src/render/transition_animation_engine.ts#L112). It's Angular animations related then. – Wolf359 Jun 03 '20 at 14:56