Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Angular Installation
  • Get help

Was this helpful?

  1. UI Library
  2. Installation

Angular

Supercharge Your Angular Applications with Plus UI: Elevate Your Development Experience

Angular Installation

  1. In the directory where your Angular project is located, open the terminal or command prompt and install the Plus UI package by typing the following command

npm install @plusui/core
  1. Open the angular.json file, which is your Angular project file, and add the style file of Plus UI to the "styles" section. We will fetch this file from the node_modules directory.

"styles":[
    "src/styles.css",
    "node_modules/@plusui/core/dist/style.css"
],
  1. Open the app.module.ts file within your Angular project. Perform the necessary import operations and add the CUSTOM_ELEMENTS_SCHEMA in the schemas section.

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import '@plusui/core';
// Other imports...

@NgModule({
  declarations: [ 
    // Other declarations...
  ],
  imports: [
    // Other imports...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // needed to support custom elements
  // Other module metadata...
})
export class AppModule { }
  1. Open an Angular component file within your project and add an example using the Plus UI component.

<plus-button status="primary">Primary Button</plus-button>

Get help

Plus UI is more than a library; it’s a community. Engage with fellow developers, share your Plus UI projects, and contribute to the library’s growth. Your insights, feedback, and contributions drive the evolution of Plus UI:

PreviousVueNextSvelte

Last updated 1 year ago

Was this helpful?

Cover

Join Github Community

Cover

Join Discord Community

Cover

Join us on Twitter