├── src
    ├── assets
    │   ├── .gitkeep
    │   └── images
    │   │   ├── meetingsdk-web-client-view.gif
    │   │   └── meetingsdk-web-component-view.gif
    ├── favicon.ico
    ├── zone-flags.ts
    ├── main.ts
    ├── styles.css
    ├── app
    │   ├── app.component.html
    │   ├── app.module.ts
    │   ├── app.component.css
    │   ├── app.component.spec.ts
    │   ├── app-new.component.ts
    │   └── app.component.ts
    └── index.html
├── .vscode
    ├── extensions.json
    ├── launch.json
    └── tasks.json
├── tsconfig.spec.json
├── .editorconfig
├── tsconfig.app.json
├── .gitignore
├── tsconfig.json
├── package.json
├── angular.json
└── README.md


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zoom/meetingsdk-angular-sample/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/assets/images/meetingsdk-web-client-view.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zoom/meetingsdk-angular-sample/HEAD/src/assets/images/meetingsdk-web-client-view.gif


--------------------------------------------------------------------------------
/src/assets/images/meetingsdk-web-component-view.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zoom/meetingsdk-angular-sample/HEAD/src/assets/images/meetingsdk-web-component-view.gif


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
3 |   "recommendations": ["angular.ng-template"]
4 | }
5 | 


--------------------------------------------------------------------------------
/src/zone-flags.ts:
--------------------------------------------------------------------------------
1 | // disable patching requestAnimationFrame
2 | (window as any).__Zone_disable_requestAnimationFrame = true;
3 | 
4 | // disable patching specified eventNames
5 | (window as any).__zone_symbol__UNPATCHED_EVENTS = ['message'];


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2 | 
3 | import { AppModule } from './app/app.module';
4 | 
5 | 
6 | platformBrowserDynamic().bootstrapModule(AppModule)
7 |   .catch(err => console.error(err));
8 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | /* You can add global styles to this file, and also import other style files */
 2 | 
 3 | html, body {
 4 |     min-width: 0 !important;
 5 |   }
 6 |   
 7 |   #zmmtg-root {
 8 |     display: none;
 9 |     min-width: 0 !important;
10 |   }
11 |   


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <main>
 2 |   <h1>Zoom Meeting SDK Sample Angular</h1>
 3 | 
 4 |   <!-- For Component View -->
 5 |   <div id="meetingSDKElement">
 6 |     <!-- Zoom Meeting SDK Component View Rendered Here -->
 7 |   </div>
 8 | 
 9 | 
10 |   <button (click)="getSignature()">Join Meeting</button>
11 | </main>
12 | 


--------------------------------------------------------------------------------
/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/spec",
 6 |     "types": [
 7 |       "jasmine"
 8 |     ]
 9 |   },
10 |   "include": [
11 |     "src/**/*.spec.ts",
12 |     "src/**/*.d.ts"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.ts]
12 | quote_type = single
13 | 
14 | [*.md]
15 | max_line_length = off
16 | trim_trailing_whitespace = false
17 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "extends": "./tsconfig.json",
 4 |   "compilerOptions": {
 5 |     "outDir": "./out-tsc/app",
 6 |     "types": []
 7 |   },
 8 |   "files": [
 9 |     "src/main.ts"
10 |   ],
11 |   "include": [
12 |     "src/**/*.d.ts",
13 |     "src/zone-flags.ts"
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Zoom Meeting SDK Sample Angular</title>
 6 |   <base href="/">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 8 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
 9 | </head>
10 | <body>
11 |   <app-root></app-root>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { BrowserModule } from '@angular/platform-browser';
 3 | import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 4 | 
 5 | 
 6 | import { AppComponent } from './app.component';
 7 | 
 8 | @NgModule({ declarations: [
 9 |         AppComponent
10 |     ],
11 |     bootstrap: [AppComponent], imports: [BrowserModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
12 | export class AppModule { }
13 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 3 |   "version": "0.2.0",
 4 |   "configurations": [
 5 |     {
 6 |       "name": "ng serve",
 7 |       "type": "chrome",
 8 |       "request": "launch",
 9 |       "preLaunchTask": "npm: start",
10 |       "url": "http://localhost:4200/"
11 |     },
12 |     {
13 |       "name": "ng test",
14 |       "type": "chrome",
15 |       "request": "launch",
16 |       "preLaunchTask": "npm: test",
17 |       "url": "http://localhost:9876/debug.html"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/app/app.component.css:
--------------------------------------------------------------------------------
 1 | main {
 2 |     width: 70%;
 3 |     margin: auto;
 4 |     text-align: center;
 5 |   }
 6 |   
 7 |   button {
 8 |     margin-top: 20px;
 9 |     background-color: #2D8CFF;
10 |     color: #ffffff;
11 |     text-decoration: none;
12 |     padding-top: 10px;
13 |     padding-bottom: 10px;
14 |     padding-left: 40px;
15 |     padding-right: 40px;
16 |     display: inline-block;
17 |     border-radius: 10px;
18 |     cursor: pointer;
19 |     border: none;
20 |     outline: none;
21 |   }
22 |   
23 |   button:hover {
24 |     background-color: #2681F2;
25 |   }
26 |   


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # Compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | /bazel-out
 8 | 
 9 | # Node
10 | /node_modules
11 | npm-debug.log
12 | yarn-error.log
13 | 
14 | # IDEs and editors
15 | .idea/
16 | .project
17 | .classpath
18 | .c9/
19 | *.launch
20 | .settings/
21 | *.sublime-workspace
22 | 
23 | # Visual Studio Code
24 | .vscode/*
25 | !.vscode/settings.json
26 | !.vscode/tasks.json
27 | !.vscode/launch.json
28 | !.vscode/extensions.json
29 | .history/*
30 | 
31 | # Miscellaneous
32 | /.angular/cache
33 | .sass-cache/
34 | /connect.lock
35 | /coverage
36 | /libpeerconnection.log
37 | testem.log
38 | /typings
39 | 
40 | # System files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
 2 | {
 3 |   "compileOnSave": false,
 4 |   "compilerOptions": {
 5 |     "outDir": "./dist/out-tsc",
 6 |     "forceConsistentCasingInFileNames": true,
 7 |     "strict": true,
 8 |     "noImplicitOverride": true,
 9 |     "noPropertyAccessFromIndexSignature": true,
10 |     "noImplicitReturns": true,
11 |     "noFallthroughCasesInSwitch": true,
12 |     "skipLibCheck": true,
13 |     "esModuleInterop": true,
14 |     "sourceMap": true,
15 |     "declaration": false,
16 |     "experimentalDecorators": true,
17 |     "moduleResolution": "node",
18 |     "importHelpers": true,
19 |     "target": "ES2022",
20 |     "module": "ES2022",
21 |     "useDefineForClassFields": false,
22 |     "lib": [
23 |       "ES2022",
24 |       "dom"
25 |     ]
26 |   },
27 |   "angularCompilerOptions": {
28 |     "enableI18nLegacyMessageIdFormat": false,
29 |     "strictInjectionParameters": true,
30 |     "strictInputAccessModifiers": true,
31 |     "strictTemplates": true
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
 3 |   "version": "2.0.0",
 4 |   "tasks": [
 5 |     {
 6 |       "type": "npm",
 7 |       "script": "start",
 8 |       "isBackground": true,
 9 |       "problemMatcher": {
10 |         "owner": "typescript",
11 |         "pattern": "$tsc",
12 |         "background": {
13 |           "activeOnStart": true,
14 |           "beginsPattern": {
15 |             "regexp": "(.*?)"
16 |           },
17 |           "endsPattern": {
18 |             "regexp": "bundle generation complete"
19 |           }
20 |         }
21 |       }
22 |     },
23 |     {
24 |       "type": "npm",
25 |       "script": "test",
26 |       "isBackground": true,
27 |       "problemMatcher": {
28 |         "owner": "typescript",
29 |         "pattern": "$tsc",
30 |         "background": {
31 |           "activeOnStart": true,
32 |           "beginsPattern": {
33 |             "regexp": "(.*?)"
34 |           },
35 |           "endsPattern": {
36 |             "regexp": "bundle generation complete"
37 |           }
38 |         }
39 |       }
40 |     }
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | 
 4 | describe('AppComponent', () => {
 5 |   beforeEach(async () => {
 6 |     await TestBed.configureTestingModule({
 7 |       declarations: [
 8 |         AppComponent
 9 |       ],
10 |     }).compileComponents();
11 |   });
12 | 
13 |   it('should create the app', () => {
14 |     const fixture = TestBed.createComponent(AppComponent);
15 |     const app = fixture.componentInstance;
16 |     expect(app).toBeTruthy();
17 |   });
18 | 
19 |   it(`should have as title 'meetingsdk-angular-sample'`, () => {
20 |     const fixture = TestBed.createComponent(AppComponent);
21 |     const app = fixture.componentInstance;
22 |     expect(app.title).toEqual('meetingsdk-angular-sample');
23 |   });
24 | 
25 |   it('should render title', () => {
26 |     const fixture = TestBed.createComponent(AppComponent);
27 |     fixture.detectChanges();
28 |     const compiled = fixture.nativeElement as HTMLElement;
29 |     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, meetingsdk-angular-sample');
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "meetingsdk-angular-sample",
 3 |   "version": "4.0.0",
 4 |   "author": "Zoom Video Communications, Inc.",
 5 |   "contributors": [
 6 |     {
 7 |       "name": "Tommy Gaessler"
 8 |     }
 9 |   ],
10 |   "scripts": {
11 |     "ng": "ng",
12 |     "start": "ng serve",
13 |     "build": "ng build",
14 |     "watch": "ng build --watch --configuration development",
15 |     "test": "ng test"
16 |   },
17 |   "private": true,
18 |   "dependencies": {
19 |     "@angular/animations": "^19.1.5",
20 |     "@angular/common": "^19.1.5",
21 |     "@angular/compiler": "^19.1.5",
22 |     "@angular/core": "^19.1.5",
23 |     "@angular/forms": "^19.1.5",
24 |     "@angular/platform-browser": "^19.1.5",
25 |     "@angular/platform-browser-dynamic": "^19.1.5",
26 |     "@angular/router": "^19.1.5",
27 |     "@zoom/meetingsdk": "^4.0.0",
28 |     "rxjs": "^7.8.2",
29 |     "tslib": "^2.3.0",
30 |     "zone.js": "^0.15.1"
31 |   },
32 |   "devDependencies": {
33 |     "@angular-devkit/build-angular": "^19.1.6",
34 |     "@angular/cli": "^19.1.6",
35 |     "@angular/compiler-cli": "^19.1.5",
36 |     "@types/jasmine": "~5.1.0",
37 |     "jasmine-core": "~5.1.0",
38 |     "karma": "~6.4.0",
39 |     "karma-chrome-launcher": "~3.2.0",
40 |     "karma-coverage": "~2.2.0",
41 |     "karma-jasmine": "~5.1.0",
42 |     "karma-jasmine-html-reporter": "~2.1.0",
43 |     "typescript": "^5.8.3"
44 |   }
45 | }


--------------------------------------------------------------------------------
/src/app/app-new.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Inject, NgZone } from '@angular/core';
 2 | import { HttpClient } from '@angular/common/http';
 3 | import { DOCUMENT } from '@angular/common';
 4 | 
 5 | import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';
 6 | 
 7 | @Component({
 8 |   selector: 'app-root',
 9 |   templateUrl: './app.component.html',
10 |   styleUrls: ['./app.component.css'],
11 |   standalone: false
12 | })
13 | export class AppComponent implements OnInit {
14 | 
15 |   authEndpoint = ''
16 |   meetingNumber = '123456789'
17 |   passWord = ''
18 |   role = 0
19 |   userName = 'Angular'
20 |   userEmail = ''
21 |   registrantToken = ''
22 |   zakToken = ''
23 | 
24 |   client = ZoomMtgEmbedded.createClient();
25 | 
26 |   constructor(public httpClient: HttpClient, @Inject(DOCUMENT) document: any, private ngZone: NgZone) {
27 | 
28 |   }
29 | 
30 |   ngOnInit() {
31 |     
32 |   }
33 | 
34 |   getSignature() {
35 |     this.httpClient.post(this.authEndpoint, {
36 | 	    meetingNumber: this.meetingNumber,
37 | 	    role: this.role,
38 |       videoWebRtcMode: 1,
39 |     }).toPromise().then((data: any) => {
40 |       if(data.signature) {
41 |         console.log(data.signature)
42 |         this.startMeeting(data.signature)
43 |       } else {
44 |         console.log(data)
45 |       }
46 |     }).catch((error) => {
47 |       console.log(error)
48 |     })
49 |   }
50 | 
51 |   startMeeting(signature: any) {
52 | 
53 |     let meetingSDKElement = document.getElementById('meetingSDKElement')!;
54 | 
55 |     this.ngZone.runOutsideAngular(() => {
56 |       this.client.init({zoomAppRoot: meetingSDKElement, language: 'en-US', patchJsMedia: true, leaveOnPageUnload: true}).then(() => {
57 |         this.client.join({
58 |           signature: signature,
59 |           meetingNumber: this.meetingNumber,
60 |           password: this.passWord,
61 |           userName: this.userName,
62 |           userEmail: this.userEmail,
63 |           tk: this.registrantToken,
64 |           zak: this.zakToken
65 |         }).then(() => {
66 |           console.log('joined successfully')
67 |         }).catch((error) => {
68 |           console.log(error)
69 |         })
70 |       }).catch((error) => {
71 |         console.log(error)
72 |       })
73 |     })
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Inject, NgZone } from '@angular/core';
 2 | import { HttpClient } from '@angular/common/http';
 3 | import { DOCUMENT } from '@angular/common';
 4 | 
 5 | import { ZoomMtg } from '@zoom/meetingsdk';
 6 | 
 7 | ZoomMtg.preLoadWasm();
 8 | ZoomMtg.prepareWebSDK();
 9 | 
10 | @Component({
11 |     selector: 'app-root',
12 |     templateUrl: './app.component.html',
13 |     styleUrl: './app.component.css',
14 |     standalone: false
15 | })
16 | export class AppComponent implements OnInit {
17 | 
18 |   authEndpoint = ''
19 |   meetingNumber = '123456789'
20 |   passWord = ''
21 |   role = 0
22 |   userName = 'Angular'
23 |   userEmail = ''
24 |   registrantToken = ''
25 |   zakToken = ''
26 |   leaveUrl = 'http://localhost:4200'
27 | 
28 |   constructor(public httpClient: HttpClient, @Inject(DOCUMENT) document: any, private ngZone: NgZone) {
29 | 
30 |   }
31 | 
32 |   ngOnInit() {
33 | 
34 |   }
35 | 
36 |   getSignature() {
37 |     this.httpClient.post(this.authEndpoint, {
38 | 	    meetingNumber: this.meetingNumber,
39 | 	    role: this.role,
40 |       videoWebRtcMode: 1
41 |     }).subscribe((data: any) => {
42 |       if(data.signature) {
43 |         console.log(data.signature)
44 |         this.startMeeting(data.signature)
45 |       } else {
46 |         console.log(data)
47 |       }
48 |     })
49 |   }
50 | 
51 |   startMeeting(signature: any) {
52 | 
53 |     document.getElementById('zmmtg-root')!.style.display = 'block'
54 | 
55 |     this.ngZone.runOutsideAngular(() => {
56 |       ZoomMtg.init({
57 |         leaveUrl: this.leaveUrl,
58 |         patchJsMedia: true,
59 |         leaveOnPageUnload: true,
60 |         success: (success: any) => {
61 |           console.log(success)
62 |           ZoomMtg.join({
63 |             signature: signature,
64 |             meetingNumber: this.meetingNumber,
65 |             passWord: this.passWord,
66 |             userName: this.userName,
67 |             userEmail: this.userEmail,
68 |             tk: this.registrantToken,
69 |             zak: this.zakToken,
70 |             success: (success: any) => {
71 |               console.log(success)
72 |             },
73 |             error: (error: any) => {
74 |               console.log(error)
75 |             }
76 |           })
77 |         },
78 |         error: (error: any) => {
79 |           console.log(error)
80 |         }
81 |       })
82 |     })
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "meetingsdk-angular-sample": {
  7 |       "projectType": "application",
  8 |       "schematics": {
  9 |         "@schematics/angular:component": {
 10 |           "standalone": false
 11 |         },
 12 |         "@schematics/angular:directive": {
 13 |           "standalone": false
 14 |         },
 15 |         "@schematics/angular:pipe": {
 16 |           "standalone": false
 17 |         }
 18 |       },
 19 |       "root": "",
 20 |       "sourceRoot": "src",
 21 |       "prefix": "app",
 22 |       "architect": {
 23 |         "build": {
 24 |           "builder": "@angular-devkit/build-angular:application",
 25 |           "options": {
 26 |             "outputPath": "docs",
 27 |             "index": "src/index.html",
 28 |             "browser": "src/main.ts",
 29 |             "polyfills": [
 30 |               "src/zone-flags.ts",
 31 |               "zone.js"
 32 |             ],
 33 |             "tsConfig": "tsconfig.app.json",
 34 |             "assets": [
 35 |               "src/favicon.ico",
 36 |               "src/assets"
 37 |             ],
 38 |             "styles": [
 39 |               "src/styles.css"
 40 |             ],
 41 |             "scripts": [],
 42 |             "allowedCommonJsDependencies": [
 43 |               "@zoom/meetingsdk"
 44 |             ]
 45 |           },
 46 |           "configurations": {
 47 |             "production": {
 48 |               "budgets": [
 49 |                 {
 50 |                   "type": "initial",
 51 |                   "maximumWarning": "3mb",
 52 |                   "maximumError": "6mb"
 53 |                 },
 54 |                 {
 55 |                   "type": "anyComponentStyle",
 56 |                   "maximumWarning": "2kb",
 57 |                   "maximumError": "4kb"
 58 |                 }
 59 |               ],
 60 |               "outputHashing": "all",
 61 |               "baseHref": "/"
 62 |             },
 63 |             "development": {
 64 |               "optimization": false,
 65 |               "extractLicenses": false,
 66 |               "sourceMap": true
 67 |             }
 68 |           },
 69 |           "defaultConfiguration": "production"
 70 |         },
 71 |         "serve": {
 72 |           "builder": "@angular-devkit/build-angular:dev-server",
 73 |           "configurations": {
 74 |             "production": {
 75 |               "buildTarget": "meetingsdk-angular-sample:build:production"
 76 |             },
 77 |             "development": {
 78 |               "buildTarget": "meetingsdk-angular-sample:build:development"
 79 |             }
 80 |           },
 81 |           "defaultConfiguration": "development"
 82 |         },
 83 |         "extract-i18n": {
 84 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 85 |           "options": {
 86 |             "buildTarget": "meetingsdk-angular-sample:build"
 87 |           }
 88 |         },
 89 |         "test": {
 90 |           "builder": "@angular-devkit/build-angular:karma",
 91 |           "options": {
 92 |             "polyfills": [
 93 |               "zone.js",
 94 |               "zone.js/testing"
 95 |             ],
 96 |             "tsConfig": "tsconfig.spec.json",
 97 |             "assets": [
 98 |               "src/favicon.ico",
 99 |               "src/assets"
100 |             ],
101 |             "styles": [
102 |               "src/styles.css"
103 |             ],
104 |             "scripts": []
105 |           }
106 |         }
107 |       }
108 |     }
109 |   }
110 | }
111 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Zoom Meeting SDK Angular sample
  2 | 
  3 | Use of this sample app is subject to our [Terms of Use](https://explore.zoom.us/en/legal/zoom-api-license-and-tou/).
  4 | 
  5 | This repo is an [Angular](https://angular.io/) app generated via the [Angular CLI](https://cli.angular.io/) that uses the [Zoom Meeting SDK](https://developers.zoom.us/docs/meeting-sdk/web/) to start and join Zoom meetings and webinars.
  6 | 
  7 | ![Zoom Meeting SDK Client View](/src/assets/images/meetingsdk-web-client-view.gif)
  8 | 
  9 | ## Installation
 10 | 
 11 | To get started, clone the repo:
 12 | 
 13 | `$ git clone https://github.com/zoom/meetingsdk-angular-sample.git`
 14 | 
 15 | > To setup and run the app you will need the [Angular CLI](https://cli.angular.io).
 16 | 
 17 | ## Setup
 18 | 
 19 | 1. Once cloned, navigate to the `meetingsdk-angular-sample` directory:
 20 | 
 21 |    `$ cd meetingsdk-angular-sample`
 22 | 
 23 | 1. Then install the dependencies:
 24 | 
 25 |    `$ npm install`
 26 | 
 27 | 1. Open the `meetingsdk-angular-sample` directory in your code editor.
 28 | 
 29 | 1. Open the `src/app/app.component.ts` file, and enter values for the variables:
 30 | 
 31 |    **NEW:** To use the [Component View](https://developers.zoom.us/docs/meeting-sdk/web/component-view/), replace `app.component.ts` with `app-new.component.ts`. (The `leaveUrl` is not needed). Also, remove the Client View CSS styles on lines 27 and 28 in in `angular.json`.
 32 | 
 33 |    | Variable                   | Description |
 34 |    | -----------------------|-------------|
 35 |    | authEndpoint          | Required, your Meeting SDK auth endpoint that securely generates a Meeting SDK JWT. [Get a Meeting SDK auth endpoint here.](https://github.com/zoom/meetingsdk-sample-signature-node.js) |
 36 |    | meetingNumber                   | Required, the Zoom Meeting or webinar number. |
 37 |    | passWord                   | Optional, meeting password. Leave as empty string if the meeting does not require a password. |
 38 |    | role                   | Required, `0` to specify participant, `1` to specify host. |
 39 |    | userName                   | Required, a name for the user joining / starting the meeting / webinar. |
 40 |    | userEmail                   | Required for Webinar, optional for Meeting, required for meeting and webinar if [registration is required](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration). The email of the user starting or joining the meeting / webinar. |
 41 |    | registrantToken            | Required if your [meeting](https://developers.zoom.us/docs/meeting-sdk/web/client-view/meetings/#join-meeting-with-registration-required) or [webinar](https://developers.zoom.us/docs/meeting-sdk/web/client-view/webinars/#join-webinar-with-registration-required) requires [registration](https://support.zoom.us/hc/en-us/articles/360054446052-Managing-meeting-and-webinar-registration). |
 42 |    | zakToken            | Required to start meetings or webinars on external Zoom user's behalf, the [authorized Zoom user's ZAK token](https://developers.zoom.us/docs/meeting-sdk/auth/#start-meetings-and-webinars-with-a-zoom-users-zak-token). The ZAK can also be used to join as an [authenticated participant](https://support.zoom.com/hc/en/article?id=zm_kb&sysparm_article=KB0063837). |
 43 |    | leaveUrl                   | Required for Client View, the url the user is taken to once the meeting is over. |
 44 | 
 45 |    Example:
 46 | 
 47 |    ```js
 48 |    authEndpoint = 'http://localhost:4000'
 49 |    meetingNumber = '123456789'
 50 |    passWord = ''
 51 |    role = 0
 52 |    userName = 'Angular'
 53 |    userEmail = ''
 54 |    registrantToken = ''
 55 |    zakToken = ''
 56 |    leaveUrl = 'http://localhost:4200'
 57 |    ```
 58 | 
 59 | 2. Save `app.component.ts`.
 60 | 
 61 | 3. Run the app:
 62 | 
 63 |    `$ ng serve --open`
 64 | 
 65 | ## Usage
 66 | 
 67 | 1. Navigate to http://localhost:4200 and click "Join Meeting".
 68 | 
 69 |    ### Client View
 70 | 
 71 |    ![Zoom Meeting SDK Client View](/src/assets/images/meetingsdk-web-client-view.gif)
 72 | 
 73 |    ### Component View
 74 | 
 75 |    ![Zoom Meeting SDK Component View](/src/assets/images/meetingsdk-web-component-view.gif)
 76 | 
 77 |   Learn more about [Gallery View requirements](https://developers.zoom.us/docs/meeting-sdk/web/gallery-view/) and [see more product screenshots](https://developers.zoom.us/docs/meeting-sdk/web/gallery-view/#how-views-look-with-and-without-sharedarraybuffer).
 78 | 
 79 | ## Deployment
 80 | 
 81 | The Angular Sample App can be easily deployed to [GitHub Pages](#github-pages), or [another static web hosting service](#other-static-web-hosting), like an AWS S3 bucket.
 82 | 
 83 | ### GitHub Pages
 84 | 
 85 | 1. Create a repo on [GitHub](https://github.com).
 86 | 
 87 | 1. Add the remote to your project:
 88 | 
 89 |    `$ git remote add origin GITHUB_URL/GITHUB_USERNAME/GITHUB_REPO_NAME.git`
 90 | 
 91 | 1. Open the `angular.json` file and replace the value for `"baseHref"` with your GitHub repo name surrounded by slashes like this: `/GITHUB_REPO_NAME/`. Example: `"baseHref": "/GITHUB_REPO_NAME/"`
 92 | 
 93 | 1. Build your project:
 94 | 
 95 |    `$ ng build --prod`
 96 | 
 97 | 1. Git add, commit, and push your project:
 98 | 
 99 |    `$ git add -A`
100 | 
101 |    `$ git commit -m "deploying to github"`
102 | 
103 |    `$ git push origin master`
104 | 
105 | 1. On GitHub, in your repo, navigate to the "settings" page, scroll down to the "GitHub Pages" section, and choose the "master branch /docs folder" for the source.
106 | 
107 | 1. Now your project will be deployed to https://GITHUB_USERNAME.github.io/GITHUB_REPO_NAME.
108 | 
109 | ### Other Static Web Hosting
110 | 
111 | 1. Build your project:
112 | 
113 |    `$ ng build --prod`
114 | 
115 | 1. Deploy the complied `/docs` directory to a static web hosting service, like an AWS S3 bucket.
116 | 
117 | ### Advanced Deployment
118 | 
119 | For more advanced instructions on deployment, [see the Angular Deployment docs](https://angular.io/guide/deployment).
120 | 
121 | ## Need help?
122 | 
123 | If you're looking for help, try [Developer Support](https://devsupport.zoom.us) or our [Developer Forum](https://devforum.zoom.us). Priority support is also available with [Premier Developer Support](https://explore.zoom.us/docs/en-us/developer-support-plans.html) plans.
124 | 


--------------------------------------------------------------------------------