CODEWITHSUNDEEP
cssangular
Titan
Titan

Reputation: 2903

How to apply margins or css classes to Angular 2 component?

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?..

Upvotes: 21

Views: 7525

Answers (2)

Coder
Coder

Reputation: 85

You need to have Bootstrap installed in your Angular project ! It proposes these dynamic properties for you !

Upvotes: 0

Meir
Meir

Reputation: 14375

Give it a display: block; in your css :

:host {
  display: block;
}

Upvotes: 48

Related Questions