Nekmo / angular2-django

angular2-django is Django Rest Framework API for Angular 5+

angular-django

angular-django is Django Rest Framework API & Material components for Angular 5+. Use the Django API in an easy way and as objects and build grids, lists and forms in an easy and reusable way.

API Usage

Some examples of the API.

List items from API

export class SnippetListComponent implements OnInit {
        snippets: Snippet[];
    
        constructor(
            private api: SnippetApi,
        )
        
        ngOnInit() {
            // Get first page from API filtered by language = Python and ordered
            // by -created.
            this.api.orderBy('-created').filter({'language': 'python'})
                    .page(1).all().subscribe((snippets: Snippet[]) => {
                this.snippets = snippets;
            });
        }
}

Get and item and edit it.

export class SnippetEditComponent implements OnInit {
        snippet: Snippet;
        highlightedCode: string;
        localDateTime: string;
        ownerFullName: string;
    
        constructor(
            private api: SnippetApi,
        )
        
        ngOnInit() {
            // Get first page from API filtered by language = Python and ordered
            // by -created.
            this.api.get(12).subscribe((snippet: Snippet) => {
                // Execute a method on Snippet
                this.highlightedCode = snippet.getHighlightedCode();
                // Execute a method on User serializer
                this.ownerFullName = snippet.owner.getFullName();
                // created is converted to Date
                this.localDateTime = snippet.created.toLocaleDateString();
                // Change snippet title (unsaved)
                snippet.title = 'New snippet title'
                // Save changes
                snippet.save().subscribe();
            });
        }
}

Serializer and API

export class Snippet extends SerializerService {

    @Field() title: string;
    @Field() owner: User;  // User is also a serializer
    @Field() created: Date;
    @Field() code: string;
    @Field() language: string;
    
    getHighlightedCode() {
        // Method on Serializer
        return '...'
    }
}


@Injectable({
  providedIn: 'root'
})
export class SnippetApi extends ApiService {

    url = '/api/snippets/';
    serializer = Snippet;

    constructor(http: HttpClient) {
        super(http);
    }
}

Material Components

django-table

Features

• Sort columns
• Pagination
• Change page size
• Parameters in the url

django-form

Features

• Create, update and patch methods
• Nested models (OneToOne & ManyToOne; OneToMany & ManyToMany unsupported)
• Featured widgets:
  • Input (text, number, etc. types)
  • Textarea
  • Select (django choices)
  • Datetime
  • Checkbox
  • django-search-input (Search on Django via API and select instance)
• Input server validation

Installation

To install this library, run:

$ npm install angular-django --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install angular-django

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { SampleModule } from 'angular-django';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    LibraryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<sampleComponent></sampleComponent>

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © nekmo