Skip to content

Angular Library which caters to the need of consumption by providing UI components like cards,collection toc, groups etc

License

Notifications You must be signed in to change notification settings

Sunbird-Ed/SunbirdEd-consumption-ngcomponents

Repository files navigation

Common angular components for Sunbird consumption!

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.

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

npm install @project-sunbird/common-consumption --save
npm install @project-sunbird/sb-styles --save

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

"styles": [
...
...
"./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
]

Add following under architect.build.assets

 {
    ...
    "build": {
    
    "builder": "@angular-devkit/build-angular:browser",
    
    "options": {
	    ...
	    ...

	    "assets": [
	    
		   ...
		   ...
		    
		    {
			    "glob": "**/*.*",
			    "input": "./node_modules/@project-sunbird/common-consumption/assets",
			    "output": "./assets/common-consumption"
		    }
	    
	    ],

    "styles": [
    
    ...
    
    "./node_modules/@project-sunbird/sb-styles/assets/_styles.scss"
    
    ],
    
    ...
    ...

},

Step 3: Import the modules and components

Import the NgModule for each component you want to use:

import { CommonConsumptionModule} from '@project-sunbird/common-consumption';

@NgModule({
    ...
    
    imports: [CommonConsumptionModule],
    
    ...
})


export class TestAppModule { }

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.

import { CardsModule } from '@project-sunbird/common-consumption/card';

import { PopoverModule } from '@project-sunbird/common-consumption/popover';


@NgModule({

...

imports: [CardsModule, PopoverModule],

exports: [CardsModule, PopoverModule],

...

})


export class MyOwnCustomSunbirdComponentsModule { }

Available components

Feature Notes Selector Code
LibraryCard Can be used in the library page for all consumption platforms sb-library-card <sb-library-card><sb-library-card>
CourseCard Can be used in the courses page for all consumption platforms sb-course-card <sb-course-card><sb-course-card>
MyCourseCard Can be used in the My courses section for all consumption platforms sb-my-course-card <sb-my-course-card></sb-my-course-card>
TocCard Can be used in the TOC card sb-toc-card NA
LibraryCardsGrid Can be used in the courses page for all consumption platforms sb-library-cards-grid
<sb-library-cards-grid [title]="Grid Title" [isLoading]="isLoading[maxCardCount="3"><sb-library-cards-grid>
CourseCardsGrid Can be used in the course page for all consumption platforms sb-course-cards-hlist
<sb-course-cards-hlist [multiRow]="true" [contentList]="range(15)"[type="'curiculum_course_card_grid'" [title]="'Courses'" [isLoading]="isLoading"><sb-course-cards-hlist>
LibraryCardsStack Can be used in the courses page for all consumption platforms sb-library-cards-stack
<sb-library-cards-stack [title]="Stack Title"[contentList]="range(15)" [maxCardCount]="3" [isLoading]="isLoading"></sb-library-cards-stack>
Confirmation Modal Can be used in places where a popup is needed with user prompt sb-confirmation-modal
LibraryFilters Can be used in the library page for all consumption platforms. sb-library-filters
FAQ Component Faq for Consumption Clients with intractable events. sb-faq
Card hover component Can be used with library card to add overlay on card with action items . sb-card-hover
TOCItem component Shows given array of Items with accordion structure. sb-toc-item
TOCChildItem component Shows given array of Items with accordion structure. sb-toc-item
Member Card component Member Card With Menu. sb-member-card
<sb-member-card></sb-member-card>
Member List component Member List With Cards. sb-member-list
<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
Group Card. sb-group-card
<sb-group-card></sb-group-card>

Available directives

Feature Notes directive Code
CertificateDownloadAsImageDirective Can be used on any DOM element to make it download certificate as image on click sbCertificateDownloadAsImage <button sbCertificateDownloadAsImage [template]="'<svg some-attr="$SOME_VAR"></svg>'" [metadata]="{$SOME_VAR: 'SOME_VALUE'}" [baseUrl]="'SAMPLE_BASE_URL'"></button>
CertificateDownloadAsPdfDirective Can be used on any DOM element to make it download certificate as PDF on click sbCertificateDownloadAsPdf <button sbCertificateDownloadAsImage [template]="'<svg some-attr="$SOME_VAR"></svg>'" [metadata]="{$SOME_VAR: 'SOME_VALUE'}" [baseUrl]="'SAMPLE_BASE_URL'"></button>

Versions

release branch npm package version Angular Version
v10_migration 4.11.0 Ng V10
release-5.1.0_v11 4.12.1 Ng V11

About

Angular Library which caters to the need of consumption by providing UI components like cards,collection toc, groups etc

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published