Angular5 step instructions for adding style class to component tags

This time I will bring you the step-by-step instructions for adding style classes to component tags in Angular5. What are the precautions for adding style classes to component tags in Angular5? The following is a practical case, let's take a look.

There are two ways to add styles to the tags of the component itself in Angular 5:

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';
 }
}

In Adding attributes in the host configuration is equivalent to the usage of binding attributes on labels.

Set style:

1. '[style.color]': "'red'": Note that there is a single quotation mark inside the double quotation marks 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:

Detailed explanation of using React Router v4

Instructions for getting started with vue forms

The above is the detailed content of Angular5 step instructions for adding style class to component tags. For more information, please follow other related articles on the PHP Chinese website!