Zoom Component inside another Component is not working

Description
I have created the angular component of zoom sdk (client sdk). added that component into .module.ts
I am trying to access this zoom component into another component, but while accessing this zoom component into another component load first instead of parent component.

for eg. I have Parent angular component A.html

< html >
//html code for…
added component
</ html >

Zoom component html page

<button (click)=“getSignature()”>Join Meeting

Zoom component .ts file
import { ZoomMtg } from '@zoomus/websdk';

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

@Component({
  selector: 'zoom-meeting',
  templateUrl: './zoommeeting.component.html',
  styleUrls: ['./zoommeeting.component.scss']
})
export class ZoomMeetingComponent implements OnInit {
constructor(public httpClient: HttpClient,){
//**nothing is initialize in the constructor but this child constructor called first instead of showing the A.html component** 
}

//signatureEndpoint = 'https://zoommeeting-1.herokuapp.com/'
apiKey = 'apiKey '
meetingNumber = 'meetingNumber '
role = '0'
apiSecret = 'apiSecret '
leaveUrl = 'http://localhost:4200'
userName = 'Angular'
userEmail = ''
passWord = ''
ngOnInit() {}
getSignature() {
    debugger;
    this.httpClient.post(this.signatureEndpoint, {
      meetingNumber: this.meetingNumber,
      role: this.role
    }).toPromise().then((data: any) => {
      if(data.signature) {
        console.log(data.signature)
        this.startMeeting(data.signature)
      } else {
        console.log(data)
      }
    }).catch((error) => {
      console.log(error)
    })
  }

  startMeeting(signature :any) {
debugger
    document.getElementById('zmmtg-root').style.display = 'block'
    ZoomMtg.init({
      leaveUrl: this.leaveUrl,
      isSupportAV: true,
      success: (success :any) => {
        console.log(success)
        ZoomMtg.join({
          signature: signature,
          meetingNumber: this.meetingNumber,
          userName: this.userName,
          apiKey: this.apiKey,
          userEmail: this.userEmail,
          passWord: this.passWord,
          success: (success :any) => {
            console.log(success)
          },
          error: (error :any) => {
            console.log(error)
          }
        })
      },
      error: (error :any) => {
        console.log(error)
      }
    })
  }
}

A-request.module.ts

@NgModule({

declarations: [
A-Component
ZoomMeetingComponent
]
})

Error
No Error

Which Client Web SDK version?
version. [1.9.0]

To Reproduce(If applicable)
ZoomMeetingComponent inside another component invoking the first instead of showing the A.html page.

  • In the A.html page I haved called the < zoom-meeting ></ zoom-meeting> so its not showing me A.html its directly loading the zoom component.

I am able to solved this issue. Sorry to bother you… :slight_smile:

#zmmtg-root {
display: none;
}

Hey @Dhruv_Chopra,

Not to worry, you didn’t both us at all :slightly_smiling_face:

I’m glad to hear that you were able to resolve your issue!

Max

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