0

I have static page where I imported my custom defined angular element

<html>
    <head>...</head>
    <body>
        <my-element></my-element>
        <script src="elements.js"></script> 
    </body>
</html>

app.module.ts

import { NgModule, Injector } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { createCustomElement } from '@angular/elements';
import { CalendarModule } from 'primeng/calendar';
import { MyElementComponent } from './my-element.component'; 

@NgModule({
    imports        : [
        BrowserModule,
        BrowserAnimationsModule, 
        CalendarModule
    ], 
    declarations   : [
        MyElementComponent
    ],
    entryComponents: [ 
        MyElementComponent  
    ] 
})

export class AppModule { 
    constructor(private injector: Injector) { };

    ngDoBootstrap() { 
        const customElement = createCustomElement(MyElementComponent, { injector: this.injector });

        customElements.define('my-element', customElement); 
    };
};

my-element.component.html

<!--some HTML-->
    <p-calendar [touchUI]="true" #calendar></p-calendar>
<!--some HTML-->

my-element.component.ts

import { Component, ViewChild } from '@angular/core'; 
import { Calendar } from 'primeng/calendar';

@Component({ 
    templateUrl  : './my-element.component.html',
    styleUrls    : ['./my-element.component.css'] 
})

export class MyElementComponent { 
    @ViewChild('calendar') calendar: Calendar;

    ngAfterViewInit() {
        console.log(this.calendar); // OUTPUT OK/CALENDAR INSTANTIATED
    };
};

So, I have 3rd party npm calendar angular component imported in angular element which is injected in static web page.

Calendar is rendered and instantiated, but it doesn't apply it's css, and therefore isn't working as expected.

For example this ui-calendar class, it is there but isn't applied

Where is the problem?

user11302427
  • 1
  • 1
  • Sorry, noob here, I edited my post... – user11302427 Apr 03 '19 at 00:03
  • How can you say css is not applicable? can you show error which will help us to solve the issue – Developer Apr 03 '19 at 00:05
  • there is no error... this calendar component renders and is instantiated but it just doesn't pull it's own css... I tried to import primeng.css file into index.html - doesn't work... I tried then to copy all from primeng.css to my-element.component.css - still wouldn't work – user11302427 Apr 03 '19 at 00:32
  • BTW calendar component is imported via npm, it's not my component... I don't know maybe I should somehow manipulate the import in node modules or something :/ – user11302427 Apr 03 '19 at 00:47
  • Have you checked if ngDoBootstrap is called? Shouldn't appmodule implement it? – Vega Apr 03 '19 at 01:35
  • Yes it is called... I think implementation of it is just thing of esthethics – user11302427 Apr 03 '19 at 01:52

1 Answers1

0

Try to play around with the ViewEncapsulation to None or Native depending on what you want.

Take a look at this response: https://stackoverflow.com/a/55735139/11448530

Using this for example:

platformBrowserDynamic().bootstrapModule(AppModule, [
  {
      defaultEncapsulation: ViewEncapsulation.Native 
  }
])
clepere
  • 34
  • 4