How to render People Picker in Client side using Typescript

SharePoint gives provision to get Site Users using People Picker. It will get Groups and People of the site. In a same way we can add people picker in custom webpart. We can easily add this control in Farm solution. But Client side can't add this directly. Let's see the steps to render this using typescript.


declare the followings

declare var SP: any;

declare var SPClientPeoplePicker: any;

declare var SPClientPeoplePicker_InitStandaloneControlWrapper: any;

Then, Initialize the control.

InitializePeoplePicker() {
        var schema = {};
        schema['PrincipalAccountType'] = 'User,DL';
        schema['SearchPrincipalSource'] = 15;
        schema['ResolvePrincipalSource'] = 15;
        schema['AllowMultipleValues'] = false;
        schema['MaximumEntitySuggestions'] = 50;

        schema['Width'] = '100%';

SPClientPeoplePicker_InitStandaloneControlWrapper('managementPeopleDiv', null, schema);

}

Call InitializePeoplePicker() function when all the controls are loaded in the page. So i have called this function on ngAfterViewInit()

Give the placeholder for people picker in HTML side.

<div id="managementPeopleDiv" class="peoplepicker"></div>

That's all build the app and place the JS filesin SharePoint library.