# pdf-viewer-organize-pages

> PDF viewer sample demonstrating page reordering, rotation, insertion, and deletion.

**Framework:** angular  **Component:** PdfViewer  **Variant:** organize-pages

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/angular/pdf-viewer-organize-pages.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-pdfviewer
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/pdf-viewer-organize-pages/organize-pages.component.ts

```typescript
import { Component, ViewEncapsulation, OnInit,ViewChild} from '@angular/core';
import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService,LoadEventArgs, FormFieldsService, FormDesignerService,PageOrganizerService, PdfViewerModule, PageOrganizerSettingsModel } from '@syncfusion/ej2-angular-pdfviewer';
import { SwitchModule } from '@syncfusion/ej2-angular-buttons';
import { ClickEventArgs } from '@syncfusion/ej2-buttons';

/**
 * Default PdfViewer Controller
 */
@Component({
    selector: 'control-content',
    templateUrl: 'organize-pages.html',
    encapsulation: ViewEncapsulation.None,
    // tslint:disable-next-line:max-line-length
    providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService,
        TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService, PageOrganizerService],
    standalone: true,
    imports: [
        SwitchModule,
        PdfViewerModule,
    ],
})

export class OrganizePagesComponent implements OnInit {
    @ViewChild('pdfviewer')
    public pdfviewerControl!: PdfViewerComponent;
    public isInitialLoading: boolean = true;
    
    public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
    public resource:string = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib";
    public pageOrganizerSettings: PageOrganizerSettingsModel = { showImageZoomingSlider: true };
    ngOnInit(): void {
        // ngOnInit function
    }
    public documentLoad(e: LoadEventArgs): void {
        if(this.isInitialLoading){
            this.pdfviewerControl.isPageOrganizerOpen = true;
            this.isInitialLoading = false;
        }
        else{
            this.pdfviewerControl.isPageOrganizerOpen = false;
        }
    }
}

```

### src/components/pdf-viewer-organize-pages/organize-pages.html

```html

<div class="control-section">
    <div class="content-wrapper">
        <ejs-pdfviewer #pdfviewer id="pdfViewer" [documentPath]='document' [resourceUrl]='resource' (documentLoad)='documentLoad($event)' [pageOrganizerSettings]='pageOrganizerSettings' style="height:640px;display:block"></ejs-pdfviewer>
    </div>
</div>

```