title: why my component is rendered without css?
body: <p>I am facing a problem in my code . I am using a bootstrap modal dialog box. when the user fills and submit the form displayed in the modal box , i want to show an in progress indicator to inform user that the request is getting processed. so here is the code that opens the modal dialogue box.</p>
  
  <pre><code>cloneFlight() {
      this.isLoading = true;
      combineLatest(
        this.translateService.get('CONFIRM.CLONE_FLIGHT', { item: this.flight.name}),
        this.flightsService.getCampaignsToClone(this.flight)
      ).subscribe( ([header, campaigns]) =&gt; { 
        this.isLoading = false;
        this.cloneFlightService.openModal(header,this.flight, campaigns);
      });
    }
  </code></pre>
  
  <p>CloneFlightService</p>
  
  <pre><code>@Injectable()
  export class CloneFlightService
   {
  
    bsModalRef: BsModalRef;
  
    constructor(private modalService: BsModalService, private flightService: FlightsService){}
  
     openModal(header: string, flight: Flight, campaigns: CampaignUnpaginated[]) {
      const initialState = {
        flight: flight,
        campaigns : campaigns,
        header: header
      };
      this.bsModalRef = this.modalService.show(CloneFlightModalComponent,{ initialState});
    }
  }
  </code></pre>
  
  <p>CloneFlightModalComponent </p>
  
  <pre><code>@Component({
    selector: 'pc-clone-flight-modal',
    templateUrl: './clone-flight-modal.component.html',
    styleUrls: ['./clone-flight-modal.component.scss']
  }
  )
  export class CloneFlightModalComponent implements OnInit {
  
    flight : Flight;
    campaigns: CampaignUnpaginated[];
    header: string;
    formGroup: FormGroup;
    compareResources = propComparator('id');
  
    showCloneForm: boolean = true;
  
    cloneSuccess:boolean = false;
    cloneFailure:boolean = false;
  
    isLoading:boolean = false;
  
  
   constructor(public modalRef: BsModalRef, private fb: FormBuilder, 
    private flightService : FlightsService){
   }
    ngOnInit() {
      this.formGroup = this.fb.group({
      flightName: [{ value: ''},[Validators.required]],
      campaign : [ '' , Validators.required]
      });
      this.showCloneForm = true;
    }
  
    handleSubmit(value: CloneFlightFormValue){
  
     const cloneFlightRequest : CloneFlightRequest  = {
  
      flightName : value.flightName ,
      campaignId : value.campaign.id,
      flightId: this.flight.id ,
  
     };
  
     this.isLoading = false;
     this.flightService.submitCloneFlight(cloneFlightRequest)
     .subscribe( data =&gt; { 
       this.showCloneForm = false;
       this.cloneSuccess = true;
       this.cloneFailure = false;
       this.isLoading = false;
     }, 
      err =&gt; {
        this.showCloneForm = false;
        this.cloneSuccess = false;
        this.cloneFailure = true;
        this.isLoading = false;
       },
      ()=&gt; {
        this.showCloneForm = false;
        this.isLoading = false;
      }
      );
    }
  }
  </code></pre>
  
  <p>clone-flight-modal.component.html</p>
  
  <pre><code>&lt;ng-container *ngIf="showCloneForm"&gt;
  
  &lt;form [formGroup]="formGroup" (ngSubmit)="handleSubmit(formGroup.value)"&gt;
  
    &lt;pc-spinner [standalone]="true" *ngIf="true"&gt;&lt;/pc-spinner&gt;
  
    &lt;pc-form-layout [showRequiredFieldsMessage]="false"&gt;    
    &lt;div class="modal-header"&gt;
    &lt;h4 class="modal-title"&gt;
        &lt;fa-icon icon="clone"&gt;&lt;/fa-icon&gt;
        {{header}} 
      &lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;div class="modal-body-content"&gt;
  
      &lt;div class="inline-inputs-container"&gt; 
        &lt;div class="inline-input ml-3"&gt;
          &lt;pc-form-field label="{{ 'LABELS.CLONE_FLIGHT' | translate }}" [required]="true" [errorMessages]="['required']"&gt;
            &lt;input type="text" formControlName="flightName" [placeholder]="'PLACEHOLDERS.CLONE_FLIGHT_NAME' | translate" ngModel&gt;
          &lt;/pc-form-field&gt;
        &lt;/div&gt;
  
        &lt;div class="inline-input ml-3"&gt;
            &lt;pc-form-field label="{{ 'LABELS.CLONE_CAMPAIGN' | translate }}" [required]="true" [errorMessages]="['required']"&gt;
            &lt;select formControlName="campaign" [compareWith]="compareResources" ngModel&gt;
              &lt;option value="" disabled&gt; Please select a campaign &lt;/option&gt;
              &lt;option *ngFor="let campaign of campaigns" [ngValue]="campaign"&gt; {{campaign.name}} &lt;/option&gt;
            &lt;/select&gt;
          &lt;/pc-form-field&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;pc-button theme="default" kind="flat" (click)="hideModal()"&gt;{{ 'ACTIONS.CANCEL' | translate }}&lt;/pc-button&gt;
    &lt;pc-button theme="primary" type="submit" [disabled]="formGroup.invalid"&gt;{{ 'ACTIONS.CONFIRM' | translate }}&lt;/pc-button&gt;
  &lt;/div&gt;
  &lt;/pc-form-layout&gt;
  &lt;/form&gt;
  &lt;/ng-container&gt; 
  
  &lt;ng-container *ngIf="cloneSuccess"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;
              &lt;fa-icon icon="clone"&gt;&lt;/fa-icon&gt;
              Success
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body-content ml-3"&gt;
          &lt;h5&gt;
            successfully cloned flight.
          &lt;/h5&gt;
        &lt;/div&gt;
  
        &lt;div class="modal-footer"&gt;
            &lt;pc-button theme="primary" (click)="hideModal()"&gt;{{ 'ACTIONS.CLOSE' | translate }}&lt;/pc-button&gt;
        &lt;/div&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-container *ngIf="cloneFailure"&gt;
      &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title"&gt;
              &lt;fa-icon icon="clone"&gt;&lt;/fa-icon&gt;
              FAILURE
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body-content ml-3"&gt;
           unable to clone flight:
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
            &lt;pc-button theme="primary" (click)="hideModal()"&gt;{{ 'ACTIONS.CLOSE' | translate }}&lt;/pc-button&gt;
        &lt;/div&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>clone-flight-modal.component.scss</p>
  
  <pre><code>@import './../../../../scss/themes';
  @import './../../../../scss/variables';
  @import './../../../../scss/mixins';
  
  .modal-header {
    border-bottom: 0px;
  }
  
  .modal-title {
    @include pc-page-title;
  }
  
  .close-btn {
    color: $gray-600;
  }
  
  .modal-footer {
    border-top: 0px;
  }
  </code></pre>
  
  <p>spinner component.</p>
  
  <p>import { Component, Input, HostBinding } from '@angular/core';</p>
  
  <pre><code>@Component({
    selector: 'pc-spinner',
    templateUrl: './spinner.component.html',
    styleUrls: ['./spinner.component.scss']
  })
  export class SpinnerComponent {
    @Input() showBackdrop = true;
    @Input()
    @HostBinding('class.standalone')
    standalone = false;
    @Input()
    @HostBinding('class.showMessage')
    showMessage = false;
  
    constructor() {}
  }
  </code></pre>
  
  <p>spinner.component.html</p>
  
  <pre><code>&lt;div *ngIf="showBackdrop &amp;&amp; !standalone" class="backdrop"&gt;&lt;/div&gt;
  
  &lt;div *ngIf="showMessage" class="message"&gt;
    &lt;div class="alert alert-info"&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="spinner"&gt;
    &lt;div class="circle circle1"&gt;&lt;/div&gt;
    &lt;div class="circle circle2"&gt;&lt;/div&gt;
    &lt;div class="circle circle3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>spinner.component.scss</p>
  
  <pre><code>@import './../../../../scss/themes';
  @import './../../../../scss/variables';
  @import './../../../../scss/mixins';
  
  :host {
    &amp;.standalone {
      display: block;
      position: relative;
      width: 100%;
      height: $spinner-standalone-height;
    }
  }
  
  :host {
    &amp;.showMessage {
      height: $spinner-show-message-height;
    }
  }
  
  .backdrop {
    z-index: $spinner-backdrop-z-index;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $spinner-backdrop-bg-color;
    border-radius: 4px;
  }
  
  .spinner {
    width: 70px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
  
    right: 0;
    bottom: 0;
    height: 20px;
    margin: auto;
    z-index: $spinner-z-index;
  }
  
  .circle {
    width: 18px;
    height: 18px;
    @include themify() {
      background-color: themed('brand-spinner');
    }  
    border-radius: 100%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
  }
  
  .spinner .circle1 {
    animation-delay: -0.32s;
  }
  
  .spinner .circle2 {
    animation-delay: -0.16s;
  }
  
  @keyframes bounce {
    0%,
    80%,
    100% {
      transform: scale(0);
    }
    40% {
      transform: scale(1);
    }
  }
  
  .message {
    width: 100%;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% + (#{$spinner-message-height} / 2));
    height: $spinner-message-height;
    z-index: $spinner-z-index;
  }
  
  .alert {
    margin: 0px auto;
    @include pc-dropshadow;
    height: inherit;
  
    &amp;::before,
    &amp;::after {
      content: '';
      position: absolute;
    }
  
    &amp;::before {
      @include pc-equilateral-triangle('down', 9px, #cceefe);
      bottom: -9px;
      left: calc(50% - 9px);
      z-index: $pc-info-popup-zindex-level-two;
    }
  
    &amp;::after {
      @include pc-equilateral-triangle('down', 10px, #b8e8fd);
      bottom: -10px;
      left: calc(50% - 9px);
      z-index: $pc-info-popup-zindex-level-one;
    }
  }
  </code></pre>
  
  <p>this is my theme.css</p>
  
  <pre><code>$themes: (
    celcom:
      (
        brand-primary: #009ade,
        brand-secondary: #fcba35,
        brand-spinner: #009ade,
        primary: #009ade,
        secondary: #f3f3f3,
        success: #119e5c,
        danger: #d0021b,
        warning: #fcba35,
        info: lighten(#009ade, 5)
      ),
    openmind:
      (
        brand-primary: #3d3d3d,
        brand-secondary: #be233a,
        brand-spinner: #be233a,
        primary: #0277bd,
        secondary: #f3f3f3,
        success: #2e7d32,
        danger: #be233a,
        warning: #fb8c00,
        info: lighten(#0277bd, 5)
      ),
    du:
      (
        brand-primary: #00aace,
        brand-secondary: #fcba35,
        brand-spinner: #00aace,
        primary: #00aace,
        secondary: #f3f3f3,
        success: #119e5c,
        danger: #d0021b,
        warning: #fcba35,
        info: lighten(#009ade, 5)
      )
  );
  
  @mixin themify($themes: $themes) {
    @each $theme, $map in $themes {
      :host-context(.theme-#{$theme}) &amp; {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map,  ($key: $value)) !global;
        }
  
        @content;
        $theme-map: null !global;
      }
    }
  }
  
  @mixin themify-global($themes: $themes) {
    @each $theme, $map in $themes {
      .theme-#{$theme} &amp; {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map,  ($key: $value)) !global;
        }
  
        @content;
        $theme-map: null !global;
      }
    }
  }
  
  @function themed($key) {
    @return map-get($theme-map, $key);
  }
  </code></pre>
  
  <p>the issue in short is  component is not visible in the clone-flight-modal.component.html because styles are not resolved from the theme file  . both spinner component and clone-flight-modal.component are in a shared module within my angular app. </p>
  
  <p>you can see in the image component is rendered without the style</p>
  
  <p><a href="https://i.stack.imgur.com/csbPr.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>this is what i got from the developer tool for the circle</p>
  
  <pre><code>.circle[_ngcontent-c9] {
      width: 18px;
      height: 18px;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bounce 1.4s infinite ease-in-out both;
      animation: bounce 1.4s infinite ease-in-out both;
      animation-duration: 1.4s;
      animation-timing-function: ease-in-out;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-direction: normal;
      animation-fill-mode: both;
      animation-play-state: running;
      animation-name: bounce;
  }
  </code></pre>
  
  <p>it misses  background-color .</p>
  
  <p>Also i can see from the chrome developer tools i get this, not sure if it is of any use .</p>
  
  <pre><code>.standalone[_nghost-c13] {
    display: block;
    position: relative;
    width: 100%;
    height: 100px; }
  
  .showMessage[_nghost-c13] {
    height: 200px; }
  
  .backdrop[_ngcontent-c13] {
    z-index: 50;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px; }
  
  .spinner[_ngcontent-c13] {
    width: 70px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 20px;
    margin: auto;
    z-index: 51; }
  
  .circle[_ngcontent-c13] {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bounce 1.4s infinite ease-in-out both;
            animation: bounce 1.4s infinite ease-in-out both; }
  
  .theme-celcom[_nghost-c13]   .circle[_ngcontent-c13], .theme-celcom   [_nghost-c13]   .circle[_ngcontent-c13] {
      background-color: #009ade; }
  
  .theme-openmind[_nghost-c13]   .circle[_ngcontent-c13], .theme-openmind   [_nghost-c13]   .circle[_ngcontent-c13] {
      background-color: #be233a; }
  
  .theme-du[_nghost-c13]   .circle[_ngcontent-c13], .theme-du   [_nghost-c13]   .circle[_ngcontent-c13] {
      background-color: #00aace; }
  
  .spinner[_ngcontent-c13]   .circle1[_ngcontent-c13] {
    -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s; }
  
  .spinner[_ngcontent-c13]   .circle2[_ngcontent-c13] {
    -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s; }
  
  @-webkit-keyframes bounce {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
              transform: scale(0); }
    40% {
      -webkit-transform: scale(1);
              transform: scale(1); } }
  
  @keyframes bounce {
    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
              transform: scale(0); }
    40% {
      -webkit-transform: scale(1);
              transform: scale(1); } }
  
  .message[_ngcontent-c13] {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(50% + (56px / 2));
    height: 56px;
    z-index: 51; }
  
  .alert[_ngcontent-c13] {
    margin: 0px auto;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    height: inherit; }
  
  .alert[_ngcontent-c13]::before, .alert[_ngcontent-c13]::after {
      content: '';
      position: absolute; }
  
  .alert[_ngcontent-c13]::before {
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 9px solid #cceefe;
      bottom: -9px;
      left: calc(50% - 9px);
      z-index: 2; }
  
  .alert[_ngcontent-c13]::after {
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid #b8e8fd;
      bottom: -10px;
      left: calc(50% - 9px);
      z-index: 1; }
  </code></pre>
  
  <p>thank you so much
  prasanth</p>