Quick Start (Angular)

Most basic rendering code

First, register NgxView360Module inside your app.module.ts.

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { NgxView360Module } from "@egjs/ngx-view360";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxView360Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then you can use View360 as <ngx-view360> like this:

demo.component.ts

import { Component } from "@angular/core";
import { View360Options, EquirectProjection } from "@egjs/ngx-view360";

@Component({
  selector: "some-demo-component",
  template: `
    <ngx-view360 class="is-16by9" [options]="options" />
  `
})
export class View360Demo {
  options: Partial<View360Options> = {
    projection: new EquirectProjection({
      src: "/egjs-view360/pano/equirect/veste.jpg",
    })
  }
}

Options

All options should be provided with prop [options].
You can change options like this:

changeOption() {
  this.options = {
    ...this.options,
    projection: new EquirectProjection({
      src: "NEW_SRC"
    })
  };
}

Styles

You can either add our CSS file to styles section of angular.json

"options": {
  // ...
  "styles": [
    "node_modules/@egjs/ngx-view360/css/view360.min.css"
    // ... Other global styles
  ]
  // ...
}

Or import from other global style file

app/src/styles.css

/* You can add global styles to this file, and also import other style files */
@import "@egjs/ngx-view360/css/view360.min.css";

Properties & Methods

See Properties & Methods

Events

All the events from Events can be directly used same as normal Angular events.
For example, you can listen to viewChange event like this:

import { ViewChangeEvent } from "@egjs/ngx-view360";

@Component({
  selector: "some-demo-component",
  template: `
    <ngx-view360 (viewChange)="onViewChange($event)" />
  `
})
export class View360Demo {
  onViewChange(event: ViewChangeEvent) {
    // ...
  }
}

Additional props

canvasClass: string = ""

Using prop class will add classes to the .view360-container element.
Instead, you can use canvasClass to add classes to .view360-canvas element.

For example, this:

<ngx-view360 [canvasClass]="SOME_CLASS" />

will generate this:

<div class="view360-container">
  <canvas class="view360-canvas SOME_CLASS" />
</div>