CODEWITHSUNDEEP
cssangular
Teoman Tıngır
Teoman Tıngır

Reputation: 2901

How styling works over components in angular?

Question is not clear but I'll break it down. In angular we can write isolated css for styling. It works pretty well for native html elements. But unlike react, angular wrap our html with custom elements like <app-card>...</app-card>. When I write css for those wrapper elements, it doesn't work .

If I have a post list like

<div class="post-list">
   <app-card [post]="post" *ngFor="let post of posts"></app-card>
</div>

If I write css to apply some vertical gap between app-card components in PostListComponent. Well nothing happens.

.post-list app-card:not(:last-child) {
  margin-bottom: 2rem;
}

How can I make it work? Or with angular logic, how can I apply vertical gap between angular components

Upvotes: 0

Views: 196

Answers (4)

Yogendra Chauhan
Yogendra Chauhan

Reputation: 825

Just add display: block; on your app-card component & it will work as expected.

.post-list app-card {
    display: block;
}


.post-list app-card:not(:last-child) {
  margin-bottom: 2rem;
}
<div class="post-list">
   <app-card>Card 1</app-card>
   <app-card>Card 2</app-card>
   <app-card>Card 3</app-card>
</div>

Upvotes: 1

Nayak
Nayak

Reputation: 772

There is no reason it shouldn't work. Just tried to put in some of your code here. https://stackblitz.com/edit/angular-scss-demo-icqrye

app.component.html

<div class="post-list">
  <app-new *ngFor="let item of [1,2,3,4]"></app-new>
</div>

styles.scss

.post-list app-new:not(:last-child) p {
  margin-top: 2rem;
  color: green;
}

And it works perfectly. Are you looking for something else?

And if you want to add the style (margins) to the component directly, you will first need to set the display of the component to block/flex as per requirement.

.post-list app-new:not(:last-child) {
  display: flex;
}

enter image description here

Upvotes: 0

Kirubel
Kirubel

Reputation: 1627

You can make the iteration in div tag then add your class

<div class="post-list">
   <div class="post" *ngFor="let post of posts">
       <app-card [post]="post"></app-card>
   </div>
</div>

And in your css

.post-list .post:not(:last-child) {
  margin-bottom: 2rem;
}

Upvotes: 0

Raz Ronen
Raz Ronen

Reputation: 2628

You can define encapsulation: ViewEncapsulation.None in your Component like this:

@Component({
    selector: 'foo',
    template: './foo.component.html',
    styleUrls: ['./foo.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class FooComponent { }

Which will treat your .css as the same if you were putting it in the global scope.

To be more accurate, it won't append .fooComponent to each css rule in foo.component.scss.

Upvotes: 0

Related Questions