Menu
Suppose I have a component that I want to apply some margins to, preferably via Bootstrap helper classes, e.g. mt-3 to apply top margin. When I specify them on the component like this:
<my-custom-input
required
class="mt-3"
name="usr"
label="User"
placeholder="Please enter username"
[(ngModel)]="username">
</my-custom-input>
the class="mt-3" does not do anything! Setting the margin manually via Chrome dev tools is not possible either... I'm guessing because my-custom-input is not a predefined HTML element (like div), it cannot have defined margins?
This seems incredibly trivial thing to need in any application, but I'm surprised I was unable to find an answer thus far. How do we reposition such component? At the very least, specifying margins at the parent level (not inside components template) seems crucial thing to need?..
680
The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
Angular components can be styled via global CSS the same as any other element in your application. Simply drop a `<link>` element on your page (typically in index. html) and you're good to go! However, Angular additional gives developers more options for scoping your styles.
They will not add up. Whichever is larger will be used.
You have used both styles and styleUrls metadata properties to style your component's HTML template.
Give it a display: block; in your css
124
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
