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);
    }
}

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 { }