https://github.com/jregistr/angular-github-widget

A small angular widget that displays github details.
https://github.com/jregistr/angular-github-widget

angular angular2 angular4 github widget

Last synced: about 2 months ago
JSON representation

A small angular widget that displays github details.

• Host: GitHub
• URL: https://github.com/jregistr/angular-github-widget
• Owner: jregistr
• License: mit
• Created: 2017-06-29T05:02:42.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-06-29T05:50:05.000Z (almost 9 years ago)
• Last Synced: 2025-07-05T22:59:04.741Z (12 months ago)
• Topics: angular, angular2, angular4, github, widget
• Language: TypeScript
• Homepage:
• Size: 565 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## Angular Github Card

[![npm version](https://badge.fury.io/js/ng-github-card.svg)](https://badge.fury.io/js/ng-github-card)   

Angular Github Card is a simple component that showing your github details. It's quite perfect for

use with a portfolio website. This project is based on [github-widget](https://github.com/surbhioberoi/github-widget). 

![Angular Github Widget Image](./demo-image.png)

### Set Up

##### First, add it to your angular project via npm

```sh

npm install -S angular-github-card

```

Next up, add `NgGithubCardModule` to the `imports` of the module you wish to use this in.   

Like So

```typescript

import { NgModule } from '@angular/core';

import {NgGithubCardModule} from 'ng-github-card';

@NgModule({

    imports: [

            /* Other imports*/

            NgGithubCardModule

        ]

})

export class MyModule {

    

}

```

### Usage

Usage is very simple. Simply use drop the component's selector in your template, bind a value to

`githubUser` and it's ready to go.   

Like So

```angular2html

```

##### Configuring the top 3 repositories to show

The widget defaults to sorting your repositories by their start count and picking the top 3 to display.

You can alter this behaviour by specifying a repository name for one or more of the inputs listed below.

* \[top1\]

* \[top2\]

* \[top3\]

These two examples highlight this usage.

```angular2html



    

    



```


#### Thank You!

Thank you for checking out this project, I hope it's useful to you!

Have a good day!