Установка

npm i --save mz-screen-detector

Подключение к модулю

@NgModule({
  declarations: [
    AppComponent,
    SignComponent,
    LkComponent,
    AppMenuBlockComponent,
    AppMenuLeftFooterControllerComponent
  ],
  imports: [
    BrowserModule,
    MzScreenDetectorModule.forRoot({
        medium: 768,
        large: 1024
      },
      150,
      ['connect-web-base-lk']
    ),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Использование

<!-- this we add style -->
<div class="block">
  <!-- example - <div class="bigRightSide c-sd-medium" mz-screen-detector> -->
  <div class="bigRightSide" mz-screen-detector>
    <div class="header"></div>

    <div class="content">
      <!-- if screen type is -->
      <div *ifScreenType="'small'">small - ifScreenType</div>
      <div *ifScreenType="'medium'">medium - ifScreenType</div>
      <div *ifScreenType="'large'">large - ifScreenType</div>

      <!-- if screen is -->
      <div *ifScreenIsSmall>small - ifScreenIsSmall</div>
      <div *ifScreenIsMedium>medium - ifScreenIsMedium</div>
      <div *ifScreenIsLarge>large - ifScreenIsLarge</div>


      <!-- if screen more/less -->
      <div *ifScreenMoreThen="'1000'">1000 - ifScreenMoreThen</div>
      <div *ifScreenMoreThen="'600'">600 - ifScreenMoreThen</div>
      <div *ifScreenLessThen="'600'">600 - ifScreenLessThen</div>
      <div *ifScreenLessThen="'1000'">1000 - ifScreenLessThen</div>
    </div>
  </div>
</div>