Post
Ask Question

How To Use Multiple Host-Context And Selectors Together In Angular

Introduction

 
Did you know that you can now combine multiple host-context and selectors in angular?

First, you can create multiple component selectors and use them for styling. This can be very useful to give your component a meaningful name that matches the applied styles.
 
Here I have created component1,component2,component3 using the below comments.
 
ng generate component component1
 
 
ng generate component component2
 
 
ng generate component component3
 
 
Once we execute all the commands finally the app.module.ts file is updated like the below code.
  1. import { NgModule } from'@angular/core';  
  2. import { BrowserModule } from'@angular/platform-browser';  
  3. import { AppRoutingModule } from'./app-routing.module';  
  4. import { AppComponent } from'./app.component';  
  5. import { Component1Component } from'./component1/component1.component';  
  6. import { Component2Component } from'./component2/component2.component';  
  7. import { Component3Component } from'./component3/component3.component';  
  8. @NgModule({  
  9.     declarations: [  
  10.         AppComponent, Component1Component, Component2Component, Component3Component  
  11.     ],  
  12.     imports: [  
  13.         BrowserModule,  
  14.         AppRoutingModule  
  15.     ],  
  16.     providers: [],  
  17.     bootstrap: [AppComponent]  
  18. })  
  19. exportclassAppModule {}   
Next, we are going to add a multi-component selector into a single selector. Add the below styles in the app.component.scss page.
  1. demo1 {  
  2.     color: red;  
  3. }.demo2 {  
  4.     color: green;  
  5. }.demo3 {  
  6.     color: blue;  
  7. }: host - context(.theme - light).demo1 {  
  8.     background - color: red;  
  9. }: host - context(.theme - light).demo2 {  
  10.     background - color: green;  
  11. }: host - context(.theme - light).demo3 {  
  12.     background - color: green;  
  13. }  
app.component.html copy the following codes.
  1. <app-component1class="demo1"></app-component1>  
  2. <app-component2class="demo2"></app-component2>  
  3. <app-component2class="demo3"></app-component2>   
You can create multiple component selectors and use them for styling. This can be very useful to give your component a meaningful name that matches the applied styles. It was better than applying classes that can easily be forgotten.
 
 
Finally, we get a result like this. I hope this article was most helpful for you.


Similar Articles