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 --saveConsuming your library
Once you have published your library to npm, you can import your library in any Angular application by running:
$ npm install angular-djangoand 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 buildTo lint all *.ts files:
$ npm run lintLicense
MIT © nekmo
