How to style Angular4 custom components based on attribute?

问题

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

回答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;
}

回答2:

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

and then the rest is the same

来源：https://stackoverflow.com/questions/45691491/how-to-style-angular4-custom-components-based-on-attribute