How do I join remote stream?

[nitinjs]

How do I join remote stream?
can you provide sample code

[nitinjs]

what I am missing
this is my sample code

import { Component, OnInit, Injector } from '@angular/core';
import { NgxAgoraService, ClientConfig, Stream, StreamSpec, AgoraClient, ClientEvent, StreamEvent } from 'ngx-agora';
import { FormControl } from '@angular/forms';
import { AppComponentBase } from '../../../../shared/app-component-base';

@Component({
    templateUrl: 'home.component.html'
})
export class HomeComponent extends AppComponentBase implements OnInit {
    public environment = {
        production: true,
        agora: {
            appId: '9cbf0d93bf9e4d34902256c73791b324'
        }
    };


    private localStream: Stream;
    private client: AgoraClient;

    /**
     * App ID used when connecting to the Agora.io servers
     */
    appId: FormControl = new FormControl(this.environment.agora ? this.environment.agora.appId : '');
    /**
     * Channel (meeting room) within the Agora app to join
     */
    channel = new FormControl('123');
    /**
     * Generated user ID that is attached to the local client when joining a meeting room
     */
    uid: string;

    /**
     * All the IDs of other users that have joined the call
     */
    remoteCalls: string[] = [];
    /**
     * Whether the local client has tuned in to the Agora meeting room
     */
    connected = false;
    /**
     * Whether the local client's A/V stream has been published to the remote meeting room
     */
    published = false;

    constructor(injector: Injector,
        private agoraService: NgxAgoraService) {
        super(injector);
        this.uid = this.appSession.user.userName;
        this.client = this.agoraService.createClient({ mode: 'live', codec: 'vp8' });
        this.agoraService.client.setClientRole("audience", () => {
            console.log("client role set as audience");
        });
        this.assignClientHandlers();

        this.join();
    }

    join(): void {
        this.localStream = this.agoraService.createStream({ streamID: this.uid, audio: false, video: false, screen: false });
        this.assignLocalStreamHandlers();
        this.init();

        this.client.join(null, this.channel.value, this.uid);
    }

    leave(): void {
        if (this.connected) {
            this.client.leave(
                () => {
                    console.log('Left the channel successfully');
                    this.connected = false;
                    this.published = false;
                    this.remoteCalls = [];
                },
                err => {
                    console.log('Leave channel failed');
                }
            );
        } else {
            this.agoraService.AgoraRTC.Logger.warning('Local client is not connected to channel.');
        }
    }

    protected init(): void {
        this.localStream.init(
            () => {
                // The user has granted access to the camera and mic.
                console.log('getUserMedia successfully');
                this.localStream.play('agora_local');
                this.connected = true;
            },
            err => console.log('getUserMedia failed', err)
        );
    }

    private assignLocalStreamHandlers(): void {
        this.localStream.on(StreamEvent.MediaAccessAllowed, () => {
            console.log('accessAllowed');
        });
        // The user has denied access to the camera and mic.
        this.localStream.on(StreamEvent.MediaAccessDenied, () => {
            console.log('accessDenied');
        });
    }

    private assignClientHandlers(): void {
        this.client.on(ClientEvent.LocalStreamPublished, evt => {
            alert("stream published");
            this.published = true;
            console.log('Publish local stream successfully');
        });

        this.client.on(ClientEvent.Error, error => {
            console.log('Got error msg:', error.reason);
            if (error.reason === 'DYNAMIC_KEY_TIMEOUT') {
                this.client.renewChannelKey(
                    '',
                    () => console.log('Renewed the channel key successfully.'),
                    renewError => console.error('Renew channel key failed: ', renewError)
                );
            }
        });

        this.client.on(ClientEvent.RemoteStreamAdded, evt => {
            alert("stream added");
            const stream = evt.stream as Stream;
            this.client.subscribe(stream, { audio: true, video: true }, err => {
                console.log('Subscribe stream failed', err);
            });
        });

        this.client.on(ClientEvent.RemoteStreamSubscribed, evt => {
            alert("stream subscribed");
            const stream = evt.stream as Stream;
            const id = this.getRemoteId(stream);
            if (!this.remoteCalls.length) {
                this.remoteCalls.push(id);
                alert("playing on:"+id);
                setTimeout(() => stream.play(id), 1000);
            }
        });

        this.client.on(ClientEvent.RemoteStreamRemoved, evt => {
            const stream = evt.stream as Stream;
            if (stream) {
                stream.stop();
                stream.close();
                this.remoteCalls = [];
                console.log(`Remote stream is removed ${stream.getId()}`);
            }
        });

        this.client.on(ClientEvent.PeerLeave, evt => {
            const stream = evt.stream as Stream;
            if (stream) {
                stream.stop();
                this.remoteCalls = this.remoteCalls.filter(call => call !== `${this.getRemoteId(stream)}`);
                console.log(`${evt.uid} left from this channel`);
            }
        });
    }

    private getRemoteId(stream: Stream): string {
        return `agora_remote-${stream.getId()}`;
    }
    ngOnInit(): void { }
}

[i1990jain]

You need not createStream or assignLocalStreamHandlers
this.client.join(null, this.channel.value, this.uid);

is enough for joining a remote stream