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.
Some examples of the 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;
});
}
}
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();
});
}
}
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);
}
}
- Sort columns
- Pagination
- Change page size
- Parameters in the url
- 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
To install this library, run:
$ npm install angular-django --save
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>
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint
MIT © nekmo