Scenario
You’ve just created a new Angular component and when you place it inside a component with padding your Angular component view overflows the padding over the external container.
Approach
This happens because the default display CSS style value for the Angular component is inline .
Set the display to block or some other display value like flex or grid and this will fix the issue.
Demo
The demo lays out the default Angular Stackblitz component as follows.
<div>
<app-root>Loading...</app-root>
</div>And if we go into the global style sheet and change display from inline to block we will see that the div container padding takes effect.
