Get started with Sitefinity Component Framework

What is Sitefinity Component Framework

The Sitefinity Component Framework is a UI component library containing reusable Angular elements, such as components, directives, services and helpers. They are built following the  Sitefinity design principles, and serve as building blocks for creating user interface for Angular applications. The library also contains Sitefinity specific styles in CSS and SCSS format.

Read more about Sitefinity Component Framework and customizing Sitefinity backend in:

• Sitefinity documentation
• Developer documentation

This guide explains how to set up your Angular project to begin using Sitefinity Component Framework. It includes information on prerequisites, installing Sitefinity Component Framework, and optionally displaying a sample component in your application to verify your setup.

If you are new to Angular or getting started with a new Angular application, see Angular's Getting Started Guide and Setting up your environment.

For existing applications, follow the steps below to begin using Sitefinity Component Framework in your project.

Installation 

The framework is distributed through npm.
To install it add the required version to your package.json file manually or run the following command:

npm  i @progress/sitefinity-component-framework  --save

Usage

Import the modules of the components you would like to use. For example, if you want to use the SfButtonComponent, add the SfButtonModule to the imports of your Angular module. 
Optionally, to make sure everything works as expected, you can place a sf-button in your app.component.html and see if it is rendered properly:

<sf-button look="large">Click me</sf-button>

Using the CSS Styles