Angular5 method to add style class to the tag of the component itself

This article mainly introduces the method of adding style class to the label of the component itself in Angular 5. Now I share it with you and give it as a reference.

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 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 {}

The above is what I compiled for everyone. I hope that in the future It will be helpful to everyone.

Related articles:

Ajax upload method to implement js processing based on server-side return data

Double-layer ajax nesting (can Multi-layer) usage example

Ajax implementation of pop-up non-refresh city selection function code

The above is the detailed content of Angular5 method to add style class to the tag of the component itself. For more information, please follow other related articles on the PHP Chinese website!