Shared UI

Generate New Component

❯ npx nx g @nx/angular:component [path/to/my-component] --project=shared-ui

New component will be created in [path/to/my-component] folder relative to packages/shared-ui/src/lib folder

Make your component shareable

Open packages/shared-ui/src/lib/shared-ui.module.ts and include your component in exports and declarations arrays in @NgModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeadNavigationComponent } from './head-navigation/head-navigation.component';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

import { MyComponent } from './my-component/my-component.component';

@NgModule({
  imports: [CommonModule, MatIconModule, MatButtonModule],
  exports: [HeadNavigationComponent, MyComponent],
  declarations: [HeadNavigationComponent, MyComponent],
})
export class SharedUiModule {}

Use your shared component in other component

Import shared-ui.module in your component

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedUiModule } from '@kmp/shared-ui';

@Component({
  selector: 'kmp-webapp',
  standalone: true,
  imports: [
    CommonModule,
    SharedUiModule,
  ],
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss'],
})
export class SomeComponent {
}

Now you can use your component in html

<div>
  <kmp-my-component></kmp-my-component>
</div>