*ngIf directive in Angular webComponents

JavaScript
1

Hi Guys, I am new to webComponents. I am facing an issue, please would you help me?

Let me tell you what i have done till now :
I created an Angular shell like project with command -

ng new MyAngularAppHolder --create-application=true

then i created an app within that called as shared-

ng generate application shared --routing=false --style=less --skip-install=true

next i created a module within it called shared and added a navigationBar Component-

ng g m shared
ng g c shared/navBar

then i added some html within my component like so-

<button (click)="hello()" >hi</button>
<div *ngIf="isBool" >hi</div>

with its ts having code -

isBool = true
  hello(){
    alert('hello')
    this.isBool = !this.isBool;
  }

then i put the component in App.component.html
next i tried running my project till now-

ng s shared

i got the button and when i clicked on it, the div did show up. so until here it worked fine.
then i wanted to make this as a web component so, i created a new project -

ng generate application my-app-1 --routing=true --style=less --skip-install=true

then i installed angular elements

ng add @angular/elements

so in the my-app-1 application’s app.module.ts,
i imported that NavBar Component, Injector, CUSTOM_ELEMENTS_SCHEMA,
then i declared CUSTOM_ELEMENTS_SCHEMA in schema,
next in constructor i added the parameter for injector of type Injector which would be then the config for createCustomElements
so then i created custom element by createCustomElement giving the tag name and the createCustomElement element declaration

import { Injector, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { createCustomElement } from '@angular/elements'
import { NavBarComponent } from 'projects/shared/src/app/shared/nav-bar/nav-bar.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas : [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
  constructor(private injector : Injector){
    customElements.define('my-app-nav-bar', createCustomElement(NavBarComponent, {injector}))
  }
 }

so after doing this i put the tag in html

<my-app-nav-bar></my-app-nav-bar>

i run the project

ng s my-app-1 --port 4300

so in the UI i can now see the button that i wrote in the shared application.

The issue Iam facing :
so that *ngIf directive that i wrote is not being affected and throws me an error,

Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’

I tried various solutions from restarting the server to explictly extending CommonModule on NavBarComponent. yet the problem still persists, can anyone please help me on how to solve the wierd problem?

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.