Skip to content
Windmillcode Angular CDK

Windmillcode Angular CDK

Welcome to the Windmillcode Angular Library, a comprehensive suite of Angular components designed to help you build engaging, robust, and user-friendly web applications. This library, also known as the Windmillcode Angular Component Development Kit (CDK), provides a collection of reusable UI components, each crafted with attention to detail and performance.

Features

Minimal Configuration/Installation

  • most libraries depend on Angular Material and compatibility issues appear as your projects get bigger. The basis of our components are vanilla js and stable typescript features so as your project grows if there are any configuration issues it (hopefully) wont be with us

Articulate Complex Thoughts Into Code Easier

  • How can we make our own flyout without grabbing a component. what if we want to remake a component from scratch down do mabye 90% of the vey detail. By understanding that you can bind our classes to every element complex features that are rather wieldy or difficult to implement now have a uniform pattern which also for greater creativity on the part of the developer.

Feels Like React

  • You have a component and you have your props and you also have setState. This design makes it easier for those with a React/Nextjs background to transition to Angular if using our library

Plug And Play

Angular can get rather a verbose language we aim to simplify angular with plug and play mentaility With plug and play every compoonent has its props as in react this props is a class and you simply pass the prop the to class to render the component

app.component.ts
// Standalone there are default values to see how the component works
props = new WMLInputZeroProps({})


// To pass arguments/customize
props = new WMLInputZeroProps({
  datetime:new WMLInputZeroDatetimeProps({
    type:"datetime",
    min =new Date("[YOUR BIRTHDAY FOR EXAMPLE]")
  })
})
app.component.html
<wml-input-zero [props]=props>
</wml-input-zero>

Constant and conforming updates :

  • Since around Angular 16.2 for every angular version we create a new version of the library. The versions are based on @angular-core This means that you can be sure that the library is always up to date with the latest angular version. down to the patch version. However as of 18.1.3 the library has been unified for production use

Extensive Component Collection

Our library includes a wide array of components, ranging from UI elements like buttons and input fields to complex constructs like file upload and dropdowns. Each component is designed to be modular, making it easy to integrate into your existing Angular projects.

Customizable and Themable

Components are designed to be easily customizable and themable, allowing you to align them with your application’s branding and design guidelines.Via modifying the css variables specific to each component you can get granular control over the look and feel of the components.

PREMIUM / ENTERPRISE

Internationalization - All components are i18n compatible under ngx-translate. Use the default en.json file in your project and update and pass the i18n strings to the appropriate keys in the props that are passed to the component View the premium version of the library

Caveats

  • fonts are not set so you can set global fonts without worry of overrides
  • “All previous versions in the changelog dont exist All versions start at 18.1.3003, although there are plans for backporting to every patch version of angular. (non-guarantted) use npm install —verbose [PACKAGE NAMES] —force for versions older than 18

Packages

The Windmillcode Angular Library offers a diverse range of components, each designed to fulfill specific UI requirements in your Angular applications. Below is a list of available components along with brief descriptions:

  1. WML Components Base:

This is the foundational package that our whole library focuses on. Its foundation is the WMLUIProperty the very basic building block of our Angular Application. From here the basis of pagination, animation , dynamic components, and more are built.

  1. WML Schematics:

Our own angular schematics to generate Angular classes according to our angular project template

  1. WML Accordion:

An accordion component that allows you to display content in a collapsible format. It’s useful for FAQs, lists, or any content that benefits from a compact presentation.

  1. WML Button:

A customizable button component that can be used across your application, ensuring consistency and themability.

  1. WML Carousel:

A carousel component that enables the display of multiple items in a sliding or rotating fashion, perfect for galleries or showcasing multiple products.

  1. WML Chips:

A component that represents input, attributes, or actions as compact elements, commonly used for tags, contact information, or interactive elements.

  1. WML Field:

A field component, potentially for forms, providing a standardized way to input data.

  1. WML File Manager:

A comprehensive component for handling file interactions, including uploading, downloading(in backlog), and displaying file information.

  1. WML Form:

A component or set of components designed to create consistent and functional forms, including various form controls.

  1. WML Infinite Dropdown:

A dropdown component that expands infinitely. Great for menus with a large amount of navigation content

  1. WML Input:

A versatile input component for forms, providing a uniform way to collect user input.

  1. WML Mobile Nav:

A navigation component designed specifically for mobile user interfaces, providing an optimized menu for smaller screens.

  1. WML Notify:

A notification component, allowing you to display alerts, messages, or other important information to users.

  1. WML Options:

A component that provides a set of selectable options, possibly as a more advanced dropdown or select component.

  1. WML Panel:

A flyout component component used to provide auxillary content, information or controls, often used in dashboards or as part of complex interfaces.

  1. WML Penrose:

A custom loading component

  1. WML Popup:

A component for displaying pop-up content, such as modals, dialogues, or tooltips.

  1. WML Select:

A select component that provides a dropdown list of options for users to choose from.

  1. WML Slicebox:

based on jquery slicebox more fluid way of implementing a carousel

  1. WML Table:

A table component designed for displaying tabular data, with features including sorting, filtering, and pagination.

  1. WML Tabs:

A component for creating tabbed interfaces, allowing users to switch between different views or content sections within the same context.

  1. WML Toggle:

A toggle switch component, providing an intuitive way for users to make binary choices, such as enabling/disabling settings.

Each component is crafted to address specific UI needs while ensuring consistency and ease of integration into your Angular projects. For more detailed information on each component, including usage examples and configuration options, refer to the library’s detailed documentation.

Getting Started

  • Click on the any of the links of the component you need and install with npm, or your preferred package manager

Documentation

Each component is documented with details on how to use it, its input/output properties, and event emitters. To dive deeper into a specific component, refer to its README.md dedicated documentation section.

Contributing

** Work In Progress** We welcome contributions to the Windmillcode Angular Library! Whether it’s adding new components, enhancing existing ones, or reporting bugs, your contributions are valuable to us. Please refer to our contribution guidelines before making a pull request.

  • pull the desired repo
  • if its a components module replace free from free.module.ts with module ts
  • Terminal 1
Terminal window
cd projects/[desired project]
npx ng build --watch
  • Terminal 2
Terminal window
# wait for project to appear in dist
cd dist/[desired project]
npm link

in the consumer you need add the path to the dist in the consumers tsconfig.json

  "[FULL LIBRARY NAME FROM PACKAGE.JSON]": [
    "[PATH TO REPO GENERATED DIST]/[LIBRAY FOLDER NAME]"
  ],
  // EXAMPLE
"@windmillcode/angular-wml-slicebox": [
  "../../../../windmillcode-Angular-CDK/dist/wml-slicebox"
],

License

The Windmillcode Angular Library is MIT licensed.

Contact

If you have any questions or feedback, please join us in discord. We’re always looking to improve our library and help the developer community.

Enjoy building with the Windmillcode Angular Library!