Estoy tratando de anular el CSS de un componente compartido. Necesito reemplazar el CSS por hasData y containers . Traté de usar ng:deep pero todavía no parece anularlo. Quiero cambiar la clase a la insignia de hasData badge badge.. en lugar de badge badge.. en el elemento span . Sin embargo, todavía quiero mantener las propiedades de la badge y agregarle algunos estilos adicionales. ¿Qué estoy haciendo mal?

 <shared-component [className]="test.hasDataId ? 'hasData' : 'containers'" *ngIf="dataItem.test" [hasData]="dataItem.test.hasDataId" [containers]="dataItem.test.parentTest" (testClick)="test($event)" >

La salida que estoy obteniendo:

 <shared-component _nghost-iny-c569="" class="hasdata" ng-reflect-has-contents="true" ng-reflect-containers="" > <span _ngcontent-iny-c569="" kendotooltip="" class="badge badge-primary mr-2 ng-star-inserted" title="" data-title="testtest" > Has Data </span> </shared-component>

mi CSS:

 :host ::ng-deep .hasData { cursor: pointer; width: 90%; font-size: 80%; background-color: grey; }