What does _ngcontent-c# mean in Angular?

Question

I'm learning Angular 2/4 and I see the html tags with the ng generated attributes: _ngcontent-c0, _ngcontent-c1...

What does this c value mean?

score 35 · Accepted Answer · answered Jul 13 '17 at 13:38

35

_ngcontent-c# attributes are added when you use ViewEncapsulation.Emulated - which is default. Angular uses these attributes to target specific elements with the styles. The number c is sort of a unique identifier of the host component. For example, if you have two components with the following templates:

ComponentA
<span></span>
<comp-b></comp-b>

ComponenB
<h1></h1>

Angular will mark all elements with styles inside component A as _ngcontent-c0 and all elements with styles inside component B with _ngcontent-c1:

<comp-a>
    <span _ngcontent-c0></span>
    <comp-b _ngcontent-c0>
        <h1 _ngcontent-c1></h1>
    </comp-b>
</comp-a>

answered Jul 13 '17 at 13:38

Max Koretskyi

101,079
60
333
488

So the root component will be 0 and nested ones would go 1...n? – Maddy Jul 13 '17 at 13:41
1

Not sure I like or want / need this `_ngcontent..` how do i turn it off ? – Tom Stickel Jan 11 '18 at 17:45
@TomStickel, what [view encapsulation](https://angular.io/api/core/ViewEncapsulation) are you using? If you use Native or None, Angular shouldn't add these attributes – Max Koretskyi Jan 11 '18 at 17:58
Well I came from Angular 1 world , dabbled with angular 2 - then got into 4, and now new project from scratch with angular 5. I have been using Angular CLI, I have not intentionally added any view encapsulation so this is all new to me. I don't recall the _ngcontent on last contract project with angular 4, so I'm unsure about this "Native" vs "None" - Is angular CLI adding it when I'm using ng serve ? – Tom Stickel Jan 11 '18 at 18:24
3

@TomStickel, ViewEncapsulation.Emulated is default mode. It's specified in the Component decorator descriptor properties – Max Koretskyi Jan 11 '18 at 18:45
1

All good and well, but what effect do the _ngcontent-c# have? – Scott Jul 30 '18 at 14:20
@Scott, can you clarify what you mean? I used `#` instead of a number. It's used to target CSS selectors and apply encapsulated styles – Max Koretskyi Jul 30 '18 at 14:59
@AngularInDepth.com right, but I mean what specific styles are applied using it? – Scott Jul 31 '18 at 15:03
@Scott, they depend on what styles you used in your `style` property of Angular decorator – Max Koretskyi Aug 01 '18 at 15:01
You can follow this link. https://blog.thoughtram.io/angular/2015/06/29/shadow-dom-strategies-in-angular2.html – asifaftab87 Feb 20 '19 at 03:50
"when you use ViewEncapsulation.Emulated"? This is confusing. I didn't use ViewEncapsulation.Emulated! Can you re-write that so it's clearer? "By default, Angular... This is technically ViewEncapsulation.Emulated" – Andrew Koper Apr 08 '20 at 16:40
@MaxKoretskyi, would you be able to help with an issue I'm having? I'm trying to create a reusable form in Angular to use on other pages. I'm not getting any errors but the component is not showing up. https://stackoverflow.com/questions/72788182/cant-see-content-of-reusable-angular-form-on-home-page – D.Hodges Jun 28 '22 at 14:28

score 17 · Answer 2 · answered Feb 20 '19 at 03:49

you can disable it by adding below import to your component,

import {ViewEncapsulation} from '@angular/core';

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

please note this line :

 encapsulation: ViewEncapsulation.None

make no addition of dynamic attribute from angular

What does _ngcontent-c# mean in Angular?

2 Answers2

Linked