# ComponentView example not displaying as expected

**URL:** <https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216>\
**Category:** Web\
**Created:** [December 8, 2021, 4:20pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216 "2021-12-08T16:20:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrobinson](https://avatars.discourse-cdn.com/v4/letter/m/f04885/32.png) [@mrobinson](https://devforum.zoom.us/u/mrobinson)\
**Post date:** [December 8, 2021, 4:20pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/1 "2021-12-08T16:20:20Z")

</div>

I am using Zoom web sdk 2.0.1, Angular 12 and the basic example for embedding Zoom meeting into a page. Joining the meeting works except

1. there is no display on the page prior to joining the meeting. The

```auto
  <!-- For Component View -->
  <div id="meetingSDKElement">
    <!-- Zoom Meeting SDK Component View Rendered Here -->
  </div>

```

displays nothing initially.

1. Once the meeting has been joined, the Zoom component is shown in a small popup window

 ![Screen Shot 2021-12-08 at 10.53.37 AM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/3/b/3b163e85b3009b080a477e07277c487e4c63221f.png)

1. The complete html

```auto
<div class="data-container">
  <div fxLayout="column" fxLayoutAlign="start center">
    <span class="page-title">Virtual Dome</span>
    <!-- For Component View -->
    <div id="meetingSDKElement">
      <!-- Zoom Meeting SDK Component View Rendered Here -->
    </div>
    <button mat-flat-button color="primary" (click)="getSignature()">JOIN VIA ZOOM</button>
  </div>
</div>

```

1. The complete component

```auto
import {Component, Inject, OnInit} from '@angular/core';
import ZoomMtgEmbedded from '@zoomus/websdk/embedded';
import {HttpClient} from '@angular/common/http';
import {DOCUMENT} from '@angular/common';
import {Constants} from '../shared/constants';
import {BackendService} from '../services/backend.service';

@Component({
  selector: 'app-zoom',
  templateUrl: './zoom.component.html',
  styleUrls: ['./zoom.component.scss']
})
export class ZoomComponent implements OnInit {
  userName = 'Mike Robinson';
  userEmail = 'mrobinson@othenos.com';
  password = '1gMsNU';
  client = ZoomMtgEmbedded.createClient();

  constructor(private backendService: BackendService,
              public httpClient: HttpClient,
              @Inject(DOCUMENT) document: any) {
  }

  ngOnInit() {
    let meetingSDKElement = document.getElementById('meetingSDKElement')!;

    this.client.init({
      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      customize: {
        meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
        toolbar: {
          buttons: [
            {
              text: 'Custom Button',
              className: 'CustomButton',
              onClick: () => {
                console.log('custom button');
                this.getSignature();
              }
            }
          ]
        }
      }
    });
  }

  getSignature() {
    this.backendService.getZoomSignature()
      .subscribe((result) => {
          const signature = result as String;
          console.log("state operation status " + signature);
          if (signature != null && signature.length > 0) {
            this.startMeeting(signature)
          }
        }
      )
  }

  startMeeting(signature: any) {
    this.client.join({
      apiKey: Constants.ZOOM_API_KEY,
      signature: signature,
      meetingNumber: Constants.ZOOM_MEETING_ID,
      password: this.password,
      userName: this.userName,
      userEmail: this.userEmail
    })
  }
}

```

There are other errors that occur once the meeting is joined, but those are for another time.

---

<div class="post-metadata">

**Author:** ![carles.nunez](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/carles.nunez/32/33242_2.png) [@carles.nunez](https://devforum.zoom.us/u/carles.nunez)\
**Post date:** [December 10, 2021, 3:47pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/2 "2021-12-10T15:47:54Z")

</div>

+100 I have the same issue

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [December 15, 2021, 6:45pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/3 "2021-12-15T18:45:33Z")

</div>

@mrobinson @carles.nunez

Are you able to provide a bit more detail on the issues you’re seeing? With the Component View, the meeting window won’t display until the meeting is joined.

Max

---

<div class="post-metadata">

**Author:** ![mrobinson](https://avatars.discourse-cdn.com/v4/letter/m/f04885/32.png) [@mrobinson](https://devforum.zoom.us/u/mrobinson)\
**Post date:** [December 15, 2021, 7:03pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/4 "2021-12-15T19:03:49Z")

</div>

The issue I am having has to do with after the meeting is joined. The Zoom UI is displaying a popup view whereas I was assuming that it would be displayed within the component that invoked it. Why would it be displayed as a popup? The code I provided is exactly what I was using to generate the screenshot.

The screenshots that are provided in the documentation for the Zoom embedded view are good but there is no code that shows how they are generated. That would really be a nice addition.

I would be happy to provide any further information you might require.

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [December 22, 2021, 10:51pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/5 "2021-12-22T22:51:22Z")

</div>

Hey @mrobinson,

Our team is planning to add more built-in customization tools but for the time being, you’ll want to adjust the CSS applied to the elements under #meetingSDKElement. Have you tested repositioning the element by changing the CSS/JS of that div?

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![mrobinson](https://avatars.discourse-cdn.com/v4/letter/m/f04885/32.png) [@mrobinson](https://devforum.zoom.us/u/mrobinson)\
**Post date:** [December 23, 2021, 3:41pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/6 "2021-12-23T15:41:54Z")

</div>

Thanks Max,

I have decided to wait until your team adds more extensive customization tools. Happy holidays!

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [January 3, 2022, 10:12pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/7 "2022-01-03T22:12:10Z")

</div>

Hey @mrobinson,

Happy Holidays! For the use case described here, it sounds like we would need a flag to determine if the window is floating or displayed where it’s placed in the DOM. I’ll bring this up during a team meeting to make sure this would be covered by the upcoming changes.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![jake2](https://avatars.discourse-cdn.com/v4/letter/j/cab0a1/32.png) [@jake2](https://devforum.zoom.us/u/jake2)\
**Post date:** [January 31, 2022, 9:32pm UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/8 "2022-01-31T21:32:31Z")

</div>

I am also seeing the same type of issue I was able to get the draggable ribbon zoom element to be confined to the div I selected as the root. But according to this webpage [https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/) we should be able to see more than just the **minimized view** and **speaker view** in the draggable ribbon zoom element. I cant find where to change that in the documentation.

@MaxM - is there a documentation page similar to [https://marketplace.zoom.us/docs/sdk/sdk-reference/web-reference](https://marketplace.zoom.us/docs/sdk/sdk-reference/web-reference) but for this new component view so I can see all the available params for methods within ZoomMtgEmbedded.createClient()?

I see this reference [https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/reference](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/reference) but its really confusing, is there a different reference with code examples?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [March 3, 2022, 7:32am UTC](https://devforum.zoom.us/t/componentview-example-not-displaying-as-expected/61216/9 "2022-03-03T07:32:36Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.