Common Consumption Components
Contains common UI components powered by angular. These components are designed to be used in sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability, maintainability hence reducing the redundant development effort significantly.
Criteria
Info
Current Release Branch
v9_Migration_Branch
NPM Published version (Latest)
4.5.2
NPM Package Name
@project-sunbird/common-consumption-v9
Works
In Angular Projects Only

Available components

Component
Code
​LibraryCard (sb-library-card-v2)
Basic Card to represent a content/asset/collection
<sb-library-card-v2><sb-library-card-v2>
​CourseCard (sb-course-card)
Can be used in the courses page to represent course distinctively
<sb-course-card><sb-course-card>
​MyCourseCard (sb-my-course-card)
Can be used in the My courses section for all consumption platforms
<sb-my-course-card></sb-my-course-card>
​TocCard (sb-toc-card)
Can be used to represent a content in a collection.
NA
​LibraryCardsGrid (sb-library-cards-grid)
Can be used represent list of collection for all consumption platforms
<sb-library-cards-grid [title]="Grid Title" [isLoading]="isLoading[maxCardCount="3"><sb-library-cards-grid>
​CourseCardsGrid (sb-course-cards-hlist)
Can be used represent list of courses for all consumption platforms
<sb-course-cards-hlist [multiRow]="true" [contentList]="range(15)"[type="'curiculum_course_card_grid'" [title]="'Courses'" [isLoading]="isLoading"><sb-course-cards-hlist>
​LibraryCardsStack (sb-library-cards-stack)
Can be used represent Stack of collections for all consumption platforms
<sb-library-cards-stack [title]="Stack Title"[contentList]="range(15)" [maxCardCount]="3" [isLoading]="isLoading"></sb-library-cards-stack>
​LibraryFilters (sb-library-filters)
Used to construct filters based on facets
​
​FAQ Component (sb-faq)
Faq Section for Consumption Clients with intractable events. This is form configuration driven.
​
​Card hover component (sb-card-hover)
Can be used with library card to add overlay on card with action items
​
​
​TOCItem component (sb-toc-item)
shows given array of Items with accordion structure.
​
​TOCChildItem component (sb-toc-item)
Shows given array of Items with accordion structure.
​
​Member Card component (sb-member-card)
Member Card With Menu.
<sb-member-card></sb-member-card>
​Member List component (sb-member-list)
Member List With Cards.
<sb-member-list [layoutConfig]="{size:'medium', isBold:false, isSelectable:true,view:'horizontal'}" [memberList]="range(15)" [isMenu]="false"(cardClick)="memberCardClick`` ($event)" (menuClick)="menuClick($event)"></sb-member-list>`
​Group Card component (sb-group-card)
Group Card.
<sb-group-card></sb-group-card>

Getting Started

For help getting started with a new Angular app, check out the Angular CLI. For existing apps, follow these steps to begin using .

Step 1: Install the package

1
npm install @project-sunbird/common-consumption --save
2
npm install @project-sunbird/sb-styles --save
Copied!

Step 2: Include the sb-styles and assets in angular.json

1
"styles": [
2
​
3
...
4
​
5
...
6
​
7
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
8
​
9
]
Copied!
Add following under architect.build.assets
1
{
2
...
3
"build": {
4
5
"builder": "@angular-devkit/build-angular:browser",
6
7
"options": {
8
9
...
10
...
11
​
12
"assets": [
13
...
14
...
15
{
16
"glob": "**/*.*",
17
"input": "./node_modules/@project-sunbird/common-consumption/assets",
18
"output": "./assets/common-consumption"
19
}
20
],
21
"styles": [
22
...
23
24
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
25
26
],
27
28
...
29
...
30
​
31
},
Copied!

Step 3: Import the modules and components

Import the NgModule for each component you want to use:
1
import { CommonConsumptionModule} from '@project-sunbird/common-consumption';
2
​
3
@NgModule({
4
...
5
6
imports: [CommonConsumptionModule],
7
8
...
9
})
10
export class TestAppModule { }
Copied!
Alternatively, you can create a separate NgModule that imports and then re-exports all of the Angular components that you will use in your application. By exporting them again, other modules can simply include your CustomSunbirdComponentsModule wherever components are needed, and automatically get all of the exported modules. A good place for importing/exporting the application-wide modules is the SharedModule.
1
import { CardsModule } from '@project-sunbird/common-consumption/card';
2
​
3
import { PopoverModule } from '@project-sunbird/common-consumption/popover';
4
​
5
@NgModule({
6
​
7
...
8
​
9
imports: [CardsModule, PopoverModule],
10
​
11
exports: [CardsModule, PopoverModule],
12
​
13
...
14
​
15
})
16
​
17
​
18
export class MyOwnCustomSunbirdComponentsModule { }
Copied!
For More Information, Please refer to GitHub repo link.