What does _ngcontent-c# mean in Angular?
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
_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>