Adding Static Classes to Our Angular Host Element

Ole Ersoy
1 min readMay 23, 2023
Image by nguyễn dũng from Pixabay


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.


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:

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.

classes = 'mat-typography mat-app-background';


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 .