Adding Static Classes to Our Angular Host Element

Image by nguyễn dũng from Pixabay

Scenario

We are creating a application-container element for our Angular application and we want to have the Angular styling classes mat-typography mat-app-background to the host element.

Approach

Add them via the host property within the Angular @Component decorator.

  host: {'class': 'mat-typography mat-app-background'},

A complete decorator might look like this:

@Component({
  standalone: true,
  selector: 'el-application-container',
  templateUrl: './application-container.component.html',
  styleUrls: ['./application-container.component.scss'],
  host: {'class': 'mat-typography mat-app-background'},
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush
})

We can also do this with an @HostBinding like this.

  @HostBinding('class')
  classes = 'mat-typography mat-app-background';

Demo

This demo adds the host property to the Stackblits my-app component element. If you open the demo up in developer tools, you’ll see the my-app element has the classes mat-typography mat-app-background added.

This demo uses @HostBinding .