nb-install-component() does not work if component is around ng-template.

[emilioyn]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Current behavior:

If component is surrounded by ng-template, classes defined under nb-install-component() is simply ignored.

Expected behavior:

If I inject a template and create an embedded view, everything under nb-install-component() mixin is ignored.

Steps to reproduce:

Create a component and use template injection.

Why do I need template injection? Here is the history: https://stackoverflow.com/questions/59505387/angular-bootstrap-grid-component

Related code:

<!-- it works if I remove ng-template -->
<ng-template>
	<div class="col-sm-{{width}} {{class}}">
		<div class="form-group">
			<label for="{{id}}" class="label">{{label}}</label>
			<input #input type="text" nbInput fullWidth id="input_{{id}}" name="input_{{name}}" required="{{required}}" [(ngModel)]="value" [maxlength]="maxlength" readonly="{{readonly}}">
		</div>
	</div>
	<span class="symbol">$</span>
</ng-template>

Sample project at Stackblitz: https://stackblitz.com/github/jvminzkz

Other information:

npm, node, OS, Browser

Node version: v12.14.0
OS: Windows 10
Browser: Chrome 80.0.3987.163

Angular, Nebular

Angular 9.04
Nebular 5.0

[fdrcbrtl]

Same issue here. Any workaround?

[btd1337]

@emilioyn https://stackblitz.com/github/jvminzkz

Yikes! The page you requested couldn't be found.

If you think this is a bug/problem on our end, please file an issue over at https://github.com/stackblitz/core

[JulianOcampo]

Any workaround?

[Pyronix]

Don't know if this applies here, as the Stackblitz example is missing, but i had a similar problem. Given was something like:

.list {
  @include nb-install-component {
    &__item {
      background: nb-theme(color-basic-800);
    }
  }
}

which didn't worked for me.

After a bit of messing with it, i figured out the include must be on the outer most level:

@include nb-install-component {
  .list {
    &__item {
      background: nb-theme(color-basic-800);
    }
  }
}

[timoschlueter]

I can confirm this issue with Nebular 7.0.0 and Angular 11.2.9. We use to define the content for one of our NbDialogs which we trigger from within one of our views. If the css-class we attach to a

inside an element is located within the nb-install-component {} the styling is not applied.

Any help or workarounds would be highly appreciated.

[timoschlueter]

This still seems to be an issue. Has anyone experienced something similar?

[A-Here-And-Now]

In my global file I am using nb-install instead of nb-install-component. For the css that wasn't working inside my nb-install-component (due to those selectors targeting ng-template content), I relocated that css to inside the nb-install {} in my global file. This worked for me.

[ericaugusto-git]

In my global file I am using nb-install instead of nb-install-component. For the css that wasn't working inside my nb-install-component (due to those selectors targeting ng-template content), I relocated that css to inside the nb-install {} in my global file. This worked for me.

This worked for my scss that I export from my custom libary, thanks.