Angular Quickstart
Manually adding Setproduct Components to an Angular project
Step 1: Generate application
Run this command in terminal to generate new Angular application
ng new <your app name here> --create-application true --routing true --strict --style=scss -v
Step 2: Install dependencies
Run this command to install NPM packages needed for a correct functioning of Setproduct components.
npm i @angular/cdk@^11.0.0 @angular/material@^11.0.0 @webcomponents/custom-elements
Step 3: Set up access to Github NPM repository
You have to request access to a private Github repository to be able to log in. Let us know that you want to try out NPM packages, and we'll add you into our repository within 1 business day.Let's add components custom NPM repository configuration. Create a .npmrc file with the following content in your project root folder. Make sure you don't have any other registries in your configs. Otherwise, you need to make our registry scoped to @crionic org or disable other registries.
registry=https://npm.pkg.github.com/crionic
//npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN
How to get personal auth token
Then you need to log into a repository by executing this command (enter your Github login, auth token instead of a password, and your Github email):
npm login --registry=https://npm.pkg.github.com
Step 4: Install Setproduct NPM packages
Run this command to install Setproduct components npm packages (Angular components, CSS styles and icons packages).
npm install @crionic/system-angular@1.4.0 @crionic/system-angular-ui@1.4.0 @crionic/icons@1.4.0
Step 5: Add scripts and styles
Add the following into scripts and styles section of your angular.json
"styles": [
...
"src/styles.scss",
"node_modules/@crionic/icons/setproduct-icons.min.css",
"node_modules/@crionic/system-angular-ui/setproduct-ui.min.css"
...
],
"scripts": [
...
"node_modules/@crionic/icons/setproduct-icons.all.min.js",
"node_modules/@webcomponents/custom-elements/custom-elements.min.js"
...
]
Add this into a style.scss file
"@import "node_modules/@crionic/system-angular-ui/set-theming";
Import Roboto and Quicksand fonts from Google fonts in index.html or in styles.scss
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
rel="stylesheet"
/>
Step 6: Import modules.
Setproduct components module SetMaterialModule, BrowserAnimationsModule and Angular Material modules for each component you want to use
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { NgModule } from '@angular/core';
import { SetMaterialModule } from '@crionic/system-angular';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSelectModule } from '@angular/material/select';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTreeModule } from '@angular/material/tree';
import { MatTooltipModule } from '@angular/material/tooltip';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AppRoutingModule,
SetMaterialModule,
MatBadgeModule,
MatBottomSheetModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatExpansionModule,
MatFormFieldModule,
MatInputModule,
MatMenuModule,
MatSelectModule,
MatSidenavModule,
MatTabsModule,
MatTooltipModule,
MatTreeModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }