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?

Answer 1

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

Answer 2

_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>