Repository navigation
class names are not retained when host is used with Component decorator #51460
Description
Which @angular/* package(s) are the source of the bug?
core, elements
Is this a regression?
No
Description
Consider following example.
@Component({
selector: 'my-app',
template: `
<h1>Hello from {{name}}!</h1>
<a target="_blank" href="https://angular.io/start">
Learn more about Angular
</a>
`,
host: {
class: 'xyz',
},
});when used as custom element like below
<my-app-element class="abc"></my-app-element>The abc class is removed and only xyz class is applied.
Expected behavior would be to have both class applied on element whene rendered on DOM.
Please provide a link to a minimal reproduction of the bug
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 16.1.5
Node: 16.19.0
Package Manager: yarn 1.22.17
OS: darwin arm64
Angular: 16.1.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, localize
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.5
@angular-devkit/build-angular 16.1.5
@angular-devkit/core 16.1.5
@angular-devkit/schematics 16.1.5
@schematics/angular 16.1.5
ng-packagr 16.1.0
rxjs 6.6.7
typescript 4.9.5
zone.js 0.13.1
Anything else?
No response
Reacted by nifiro, Timo Wolf and Chintan Kavathia
Activity
JeanMeche commentedon Aug 23, 2023
I've noticed this issue also happens on the root component when using regular angular components. The classes are replaced by the host ones.
test(core): static styles and dynamic component creation
pkozlowski-opensource commentedon Jan 21, 2025
This is a valid issue report that touches upon an inconsistent way of dealing with static styling for the dynamically created components. I've created a test case for it here: https://github.com/pkozlowski-opensource/angular/tree/issue_51460
MattiJarvinen commentedon Apr 5, 2026
@pkozlowski-opensource any known workarounds other than giving another name for the class name input?
I was tinkering on a content renderer that would map markdown (marked) to Angular components and regular HTML and this seems like it might hit me pretty bad.