Add styles to component tags

This time I will introduce to you the precautions for adding styles to component tags and adding styles to component tags. The following is a practical case, let's take a look.

Method 1: Use the host attribute of @Component

@Component({
 selector : 'myComponent',
 host : {
  '[style.color]' : "'red'", 
  '[style.background-color]' : 'backgroundColor'
 }
})
class MyComponent {
 backgroundColor: string;
 constructor() {
  this.backgroundColor = 'blue';
 }
}

Add attributes in the host configuration, which is equivalent to the usage of binding attributes on labels.

Set style:

1. '[style.color]': "'red'": Note that there is a single quote inside the double quotes of the red value.

2. '[style.background-color]':'backgroundColor': This refers to the variable backgroundColor in the component.

The advantage of this method is that you can use component variables in styles.

Set class:

@Component({
 selector : 'myComponent',
 host : {
  '[class.myclass]' : 'showMyClass'
 }
})
class MyComponent {
 showMyClass = false;
 constructor() {
 }
 toggleMyClass() {
  this.showMyClass = !this.showMyClass;
 }
}

Method 2: Use: host selector in the style

@Component({
 selector : 'myComponent',
 styles : [`
  :host {
   color: red;
   background-color: blue;
  }
 `]
})
class MyComponent {}

I believe you have mastered the method after reading the case in this article , for more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue Nuxt.js makes server-side rendering

Get the largest and smallest element in Number

The above is the detailed content of Add styles to component tags. For more information, please follow other related articles on the PHP Chinese website!