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

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

Answer 2

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