How to style Angular4 custom components based on attribute?

Question

In Polymer we have this concept where we add specific properties to certain components, and then style that component with associated attribute. (This way, it differentiates them from the same component that doesnt have that attribute.

For example

Polymer

<osb-retailer-details overlay></osb-retailer-details>
<osb-retailer-details></osb-retailer-details>

And then to style <osb-retailer-details> component with overlay attribute, we do the following:

:host {
  box-sizing: border-box;
  display: block;
  margin: 0 0 15px;
  
  &[overlay] {
    margin-bottom: 0;
  }
}

Now my question

In angular4, can we do the same thing? Where we pass attribute to component, and style it, just like above?

Thanks

Yes, it basically works the same way: plnkr.co/edit/OZv3AL1YsHYQHedXTjBr?p=preview — JB Nizet
– JB Nizet, Commented Aug 15, 2017 at 11:16
I see. So judging by that, this means that If I'm passing an object to a child component (e.g <osb-retailer-details [prevCard] ="person"></ osb-retailer-details>). I can style the child component by doing :host[prevCard]{...}? @JBNizet — James
– James, Commented Aug 15, 2017 at 11:25
@JBNizet It didnt work :( not sure why, but it made sense so much. It should've worked — James
– James, Commented Aug 15, 2017 at 11:54
actually, it worked. Lmao, not sure why. Just refreshed the page @JBNizet — James
– James, Commented Aug 15, 2017 at 11:56

JB Nizet · Accepted Answer · 2017-08-15 11:59:09Z

1

Yes, it basically works the same way. Here's an example.

component definition:

@Component({
  selector: 'osb-retailer-details',
  template: '<div>hello world</div>',
  styleUrls: ['src/retailer-details.css']
})
export class RetailerDetails {

}

src/retailer-details.css file:

:host {
  display: block;
  background-color: yellow;
}

:host[overlay] {
  border: 4px solid red;
}

answered Aug 15, 2017 at 11:59

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Thank you bud. Really appreciate your help :)

Milad · Accepted Answer · 2017-08-15 11:15:28Z

0

<osb-retailer-details [attr.overlay]="'overlay'"></osb-retailer-details>

and then the rest is the same

answered Aug 15, 2017 at 11:15

Milad

28.8k11 gold badges78 silver badges91 bronze badges

Collectives™ on Stack Overflow

How to style Angular4 custom components based on attribute?

Polymer

Now my question

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Polymer

Now my question

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related